jQuery | event.stopPropagation() 方法

介绍

event.stopPropagation()方法是jQuery的事件处理程序方法之一，用于停止事件从进一步传播。当事件被触发时，它会向上冒泡并在层次结构中沿途触发父级元素的任何事件处理程序。 event.stopPropagation()方法可以防止事件冒泡，并且防止执行任何在DOM层次结构中的其他事件处理程序。

语法

event.stopPropagation()

用法

event.stopPropagation()是一个仅从事件处理程序函数内部调用的方法。当事件处理程序函数绑定到事件的元素上时，当事件触发时，事件将沿着DOM层次结构向上传播，并在沿途遇到任何处理程序时执行它们。但是，如果在事件处理程序函数内部调用event.stopPropagation()方法，则该事件将停止冒泡，不会传播到DOM结构中的任何其他元素。

以下是一个简单的示例，演示如何在单击“子元素”时停止事件冒泡：

<div class="parent">
  父元素
  <div class="child">
    子元素
  </div>
</div>

$(".child").click(function(event) {
  event.stopPropagation();
  alert("点击了子元素");
});

在这个例子中，当用户单击“子元素”时，由于event.stopPropagation()停止了事件冒泡，所以不会触发“父元素”的单击事件处理程序函数。

注意事项

• event.stopPropagation()仅防止事件从冒泡到DOM树的其他元素，但不会阻止事件的默认行为。如果要取消事件的默认行为，需要将event.preventDefault()方法添加到事件处理程序函数中。
• 在使用event.stopPropagation()方法时，请确保你执行该方法的事件处理程序确实存在。如果你没有为元素绑定事件处理程序，则event.stopPropogation()也不会有任何效果。
• 在某些情况下，会出现需要同时取消事件冒泡和事件默认行为的情况。在这种情况下，可以使用以下代码：

event.preventDefault();
event.stopPropagation();

参考链接

官方文档