如何在 jQuery 中阻止事件冒泡？

当一个元素触发了一个事件时，事件会沿着 DOM 树向上冒泡，直到到达根节点。这意味着如果你有多个嵌套的元素绑定了相同的事件处理程序，事件将从最内部的元素开始传播，直到到达包含它们的父元素。

在某些情况下，你可能想要阻止事件冒泡，以避免父元素继续接收该事件。在 jQuery 中，可以使用 event.stopPropagation() 方法来停止事件冒泡。

示例代码

<div id="parent">
  <div id="child">
    Click me!
  </div>
</div>

$("#child").click(function(event) {
  event.stopPropagation();
  alert("Child clicked!");
});

$("#parent").click(function(event) {
  alert("Parent clicked!");
});

在上面的代码中，我们有一个父元素和一个子元素，都绑定了 click 事件处理程序。当单击子元素时，它会弹出一个警告框并显示 "Child clicked!"。但是，如果不调用 event.stopPropagation() 方法，则还会在单击子元素后弹出另一个警告框并显示 "Parent clicked!"。

总结

阻止事件冒泡是一项非常有用的技术，可以帮助你避免意外触发其他元素的事件处理程序。在 jQuery 中，可以通过调用 event.stopPropagation() 方法来实现这一点。记住，在使用此方法时要小心，以确保你不会意外阻止了其他重要的事件处理程序。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29017