为何点击事件会绑定到嵌套列表项？如何取消该事件？

嘿，这个问题我碰到好多次了！咱们先搞清楚为啥会这样，再给你俩靠谱的解决办法：

为啥嵌套项会触发父元素的点击事件？ #

这是浏览器的事件冒泡机制在搞鬼！当你点击页面上的元素时，事件会从触发它的最内层元素开始，一层层向上冒泡到它的父元素、祖父元素……直到document。你的嵌套列表项是带.item类的li的后代元素，所以点击嵌套项时，事件会一路冒泡到父级的.item li，触发你绑定的点击事件。

补全你没写完的示例结构，更直观：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item"><a href="#">Red</a></li>
  <li class="item">Blue
    <ul>
      <li>Light Blue</li> <!-- 点击这个嵌套项会触发父级.item的点击事件 -->
    </ul>
  </li>
</ul>

点击Light Blue这个嵌套li时，事件会从它开始冒泡，先到父ul，再到父级的.item li，于是就触发了绑定的alert('click')。

怎么取消嵌套项的事件触发？ #

这里有两种常用的解决方案，你可以根据场景选：

方案1：阻止事件冒泡 #

在你的点击事件处理函数里，调用e.stopPropagation()就能阻止事件继续向上冒泡，这样嵌套项的点击事件就不会传到父级的.item li了。修改后的代码如下：

$('.item').on('click',function(e){
  e.stopPropagation(); // 关键：阻止事件冒泡
  alert('click');
});

⚠️ 注意：如果你的.item元素内部还有其他需要冒泡的事件，这个方法可能会影响它们的正常触发，不过在你的场景里刚好适用。

方案2：精准判断触发元素 #

如果你不想阻止整个事件冒泡，可以在事件处理函数里判断实际点击的元素是不是你真正想触发的目标。比如只有当点击的是.item本身或者它的直接子元素（比如那个<a>标签）时，才执行代码：

$('.item').on('click',function(e){
  // 判断点击的元素是否是当前.item元素，或者是它的直接子节点
  if(e.target === this || $(e.target).parent()[0] === this){
    alert('click');
  }
});

这种方式更灵活，不会影响其他事件的冒泡行为。

内容的提问来源于stack exchange，提问作者Ven Nilson