事件。stopPropagation将阻止父元素上的处理程序运行。 调用的事件。stopImmediatePropagation还将阻止同一元素上的其他处理程序运行。

令人惊讶的是，所有其他答案都只说了一半事实或实际上是错误的!

e.s stopimmediatepropagation()停止为该事件调用任何进一步的处理程序，没有异常 e.s stoppropagation()类似，但如果尚未调用，仍然调用此元素上此阶段的所有处理程序

什么阶段?

例如，一个点击事件总是首先沿着DOM向下走(称为“捕获阶段”)，最后到达事件的起源(“目标阶段”)，然后再次冒泡(“冒泡阶段”)。使用addEventListener()，您可以分别为捕获阶段和冒泡阶段注册多个处理程序。(目标阶段在目标上调用这两种类型的处理程序，没有区别。)

这是其他答案的错误之处:

quote: “event.stopPropagation() allows other handlers on the same element to be executed” correction: if stopped in the capture phase, bubble phase handlers will never be reached, also skipping them on the same element quote: “event.stopPropagation() [...] is used to stop executions of its corresponding parent handler only” correction: if propagation is stopped in the capture phase, handlers on any children, including the target aren’t called either, not only parents ...and: if propagation is stopped in the bubble phase, all capture phase handlers have already been called, including those on parents

一个小提琴和mozilla.org事件阶段解释与演示。

下面是一个演示来说明两者的区别:

document.querySelectorAll(“按钮”)[0]。addEventListener(“点击”,e = > { e.stopPropagation (); 提醒(1); })； document.querySelectorAll(“按钮”)[1]。addEventListener(“点击”,e = > { e.stopImmediatePropagation (); 提醒(1); })； document.querySelectorAll(“按钮”)[0]。addEventListener(“点击”,e = > { 提醒(2); })； document.querySelectorAll(“按钮”)[1]。addEventListener(“点击”,e = > { 提醒(2); })； < div onclick = "警报(3)" > < >按钮1……2 > < /按钮 <按钮> 1 > < /按钮 < / div >

请注意，可以将多个事件处理程序附加到元素上的事件。

事件。stopPropagation将阻止父元素上的处理程序运行。 调用的事件。stopImmediatePropagation还将阻止同一元素上的其他处理程序运行。

一个演示这两种传播停止如何工作的小示例。

var state = { stopPropagation: false, stopImmediatePropagation: false }; function handlePropagation(event) { if (state.stopPropagation) { event.stopPropagation(); } if (state.stopImmediatePropagation) { event.stopImmediatePropagation(); } } $("#child").click(function(e) { handlePropagation(e); console.log("First event handler on #child"); }); $("#child").click(function(e) { handlePropagation(e); console.log("Second event handler on #child"); }); // First this event will fire on the child element, then propogate up and // fire for the parent element. $("div").click(function(e) { handlePropagation(e); console.log("Event handler on div: #" + this.id); }); // Enable/disable propogation $("button").click(function() { var objectId = this.id; $(this).toggleClass('active'); state[objectId] = $(this).hasClass('active'); console.log('---------------------'); }); div { padding: 1em; } #parent { background-color: #CCC; } #child { background-color: #000; padding: 5em; } button { padding: 1em; font-size: 1em; } .active { background-color: green; color: white; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent"> <div id="child">&nbsp;</div> </div> <button id="stopPropagation">Stop Propogation</button> <button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>

绑定了三个事件处理程序。如果我们不停止任何传播，那么应该有四个警报——三个在子div上，一个在父div上。

如果我们停止事件传播，那么将会有3个警报(都在内部子div上)。由于事件不会沿着DOM层次结构向上传播，所以父div不会看到它，它的处理程序也不会触发。

如果我们立即停止传播，那么只有1个警报。尽管有三个事件处理程序附加到内部的子div，但只执行了一个，并且立即终止任何进一步的传播，即使是在同一元素中。

1) event.stopPropagation (): 仅用于停止相应父处理程序的执行。

2) event.stopImmediatePropagation (): 它用于停止其相应的父处理程序的执行，也用于停止除当前处理程序外附加到自身的处理程序或函数的执行。 它还停止所有附加到整个DOM的当前元素的处理程序。

下面是示例:Jsfiddle!

谢谢, sahil聊