阻止事件委托

事件委托是一种常用的优化技巧，可以减少页面中大量的事件绑定，提高页面性能。但是有些情况下，我们需要阻止事件委托，例如在某个元素上绑定的事件需要阻止冒泡，避免影响到其他元素。

阻止事件委托的方法有两种：

1. 在事件处理函数中使用 stopPropagation() 方法阻止事件冒泡，从而避免事件委托的影响。

document.querySelector('.parent').addEventListener('click', function(event) {
  event.stopPropagation();
  // 处理点击事件
});

2. 在事件委托的元素上添加 data-stop-propagation 属性，表示该元素的事件不需要冒泡到父元素。

<div class="parent">
  <div class="child" data-stop-propagation></div>
</div>

document.querySelector('.parent').addEventListener('click', function(event) {
  if (event.target.getAttribute('data-stop-propagation') !== null) {
    return;
  }
  // 处理点击事件
});

需要注意的是，第二种方法虽然可以阻止事件委托，但是需要在模板中添加额外的属性，不如第一种方法简洁。而且如果元素的结构变化，可能会导致 data-stop-propagation 属性失效，建议根据具体情况选择合适的方法。