[分享]css不触发事件的做法

在CSS中，当我们使用了一些特定的属性和值时，可能会导致元素不再触发事件。比如，当我们为元素设置了`pointerevents`属性为`none`时，该元素便不会再响应鼠标事件。 但是，有时候我们又不...

在CSS中，当我们使用了一些特定的属性和值时，可能会导致元素不再触发事件。比如，当我们为元素设置了`pointer-events`属性为`none`时，该元素便不会再响应鼠标事件。
但是，有时候我们又不得不使用这些属性和值，该怎么办呢？下面我们来介绍一些实现不触发事件的技巧，以供大家参考。
第一种方法是使用伪元素。我们可以为元素添加一个空白的伪元素，并且在该伪元素上设置事件监听（这里我们以点击事件为例）。这样，即便元素本身不响应事件，伪元素也可以接受事件并触发相应的动作。
示例代码如下：

  .box {
      position: relative;
      pointer-events: none; /* 让元素不响应鼠标事件 */
    }
    .box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: auto; /* 让伪元素接收鼠标事件 */
    }
    .box::before:hover {
      background-color: rgba(0,0,0,0.5);
    } 

第二种方法是使用事件委托。我们可以为元素的父元素添加事件监听，然后判断点击的目标元素是否是需要触发事件的元素。这样，即便元素本身不响应事件，父元素也可以捕获该事件并做出相应的处理。
示例代码如下：

  <div class="container">
      <div class="box"></div>
    </div>
    <script>
      const container = document.querySelector('.container');
      container.addEventListener('click', function(event) {
        if (event.target.classList.contains('box')) {
          // 在这里处理点击事件
        }
      });
    </script> 

以上就是两种实现不触发事件的方法，可以根据具体情况选择使用。希望本文能够对大家有所帮助。