CSS 事件穿透

一、CSS pointer-events 属性

CSS 的 pointer-events 属性定义了元素是否可以成为鼠标事件的目标。默认情况下（取值为 auto），元素能够成为鼠标事件的目标。但如果将其设置为 none，那么元素就无法成为鼠标事件的目标。这样，如果一个事件穿透的元素被其它元素完全覆盖，那么被覆盖的元素就可以设置 pointer-events 属性为 none，从而避免事件穿透。以下是一个示例：

    <!-- HTML代码 -->
    <div class="parent">
      <div class="child"></div>
    </div>
    
    /* CSS代码 */
    .parent {
      position: relative;
      width: 200px;
      height: 200px;
      background: red;
    }
    
    .child {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background: green;
    }
    
    .parent:hover .child {
      pointer-events: none;
    }

在上述样式中，父元素（红色方块）完全覆盖了子元素（绿色方块）。当鼠标移动到父元素上时，根据:hover 选择器的作用，子元素的 pointer-events 被设置为 none，这样自然就避免了事件穿透。

二、使用 JavaScript 解决事件穿透

1. 事件委托

在 JavaScript 中，事件委托是一种非常实用的技巧。它通过将事件监听器添加到元素的父元素上，来监听子元素触发的事件。在处理复杂的事件触发场景时，使用事件委托能够大大简化代码。

使用事件委托可以有效地避免事件穿透，因为子元素上的事件会被委托给父元素进行处理，而不是直接在子元素上触发。以下是一个示例：

    <!-- HTML代码 -->
    <ul id="list">
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      <li>列表项4</li>
      <li>列表项5</li>
    </ul>
    
    /* CSS代码 */
    li {
      padding: 10px;
      background-color: #eee;
    }
    
    li.selected {
      background-color: #f00;
      color: #fff;
    }
    
    // JavaScript代码
    var list = document.getElementById('list');
    
    list.addEventListener('click', function(event) {
      var target = event.target;
      if (target.nodeName === 'LI') {
        target.classList.toggle('selected');
      }
    });

在上述代码中，我们通过事件委托为所有列表项添加点击事件监听器。当用户点击某个列表项时，事件会冒泡到父元素上，并在父元素上触发处理函数。事件处理函数判断用户是否点击了一个列表项，然后将该列表项的选中状态进行切换。

2. 使用 event.stopPropagation() 方法

在事件处理函数中，我们可以使用 event.stopPropagation() 方法来停止事件冒泡。当事件冒泡到某个元素时，会自动触发该元素上绑定的事件处理函数，如果我们不希望事件继续向上冒泡，就可以使用 stopPropagation() 方法停止事件冒泡。这样就可以有效地避免事件穿透。以下是一个示例：

    <!-- HTML代码 -->
    <div id="outer">
      <div id="inner"></div>
    </div>
    
    /* CSS代码 */
    #outer {
      width: 200px;
      height: 200px;
      background-color: #f00;
    }
    
    #inner {
       width: 100px;
       height: 100px;
       background-color: #0f0;
    }
    
    // JavaScript代码
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    
    outer.addEventListener('click', function() {
      alert('点击outer');
    });
    
    inner.addEventListener('click', function(event) {
      alert('点击inner');
      event.stopPropagation();
    });

在上述代码中，当用户点击 inner 元素时，事件会冒泡到其父元素 outer 上。在 inner 元素的事件处理函数中，我们使用 stopPropagation() 方法来阻止事件冒泡，这样就可以避免触发 outer 元素上的事件处理函数。

三、结语

本文简单介绍了 CSS 事件穿透的问题以及解决方法，其中 pointer-events 属性和事件委托都是非常实用的技巧，可以帮助我们更好地处理 Web 开发中的复杂场景。但是，在实际开发中，由于涉及到不同的浏览器兼容性问题，针对不同的场景可能还需要一些特定的解决方案。