stopPropagation与stopImmediatePropagation

event.stopPropagation()event.stopImmediatePropagation()什么区别?

stopPropagation将阻止任何处理程序执行stopImmediatePropagation将阻止任何父处理程序任何其他处理程序执行

jquery文档中的一个简单例子:

 $("p").click(function(event){ event.stopImmediatePropagation(); }); $("p").click(function(event){ // This function won't be executed $(this).css("background-color", "#f00"); }); 

在jsfiddle上添加了一个小例子来演示这些传播停止是如何工作的。

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

如果我们阻止事件传播,那么会有3个警报(全部在内部的子div)。 由于该事件不会传播到DOM层次结构,所以父div不会看到它,并且其处理程序不会触发。

如果我们立即停止传播,那么只会有一个警报。 即使有三个事件处理程序附加到内部的子div,只有1被执行,任何进一步的传播立即被杀死,即使在同一个元素。

从jQuery API :

除了保持元素的其他处理器不被执行外,该方法还通过隐式调用event.stopPropagation()来停止冒泡。 为了防止事件冒泡到祖先元素,但允许其他事件处理程序在同一个元素上执行,我们可以使用event.stopPropagation()来代替。

使用event.isImmediatePropagationStopped()来知道这个方法是否曾被调用(在该事件对象上)。

简而言之: event.stopPropagation()允许执行同一元素上的其他处理程序,而event.stopImmediatePropagation()可以防止每个事件都运行。

event.stopPropagation将阻止父元素上的处理程序运行。
调用event.stopImmediatePropagation也将阻止同一元素上的其他处理程序运行。

我是一个迟到的人,但也许我可以用一个具体的例子来说:

说,如果你有一个<table> ,与<tr> ,然后<td> 。 现在假设为<td>元素设置了3个事件处理程序,那么如果在为<td>设置的第一个事件处理程序中执行event.stopPropagation() ,则<td> 所有事件处理程序仍将运行 ,但事件不会传播到<tr><table> (并且不会上升到<body><html>documentwindow )。

但是,现在,如果在第一个事件处理程序中使用event.stopImmediatePropagation() ,那么<td>的另外两个事件处理程序将不会运行 ,并且不会传播到<tr><table>不会上升到<body><html>documentwindow )。

请注意,这不仅仅适用于<td> 。 对于其他元素,它将遵循相同的原则。

event.stopPropagation()允许执行同一元素上的其他处理程序,而event.stopImmediatePropagation()可防止每个事件都运行。 例如,见下面的jQuery代码块。

 $("p").click(function(event) { event.stopImmediatePropagation(); }); $("p").click(function(event) { // This function won't be executed $(this).css("color", "#fff7e3"); }); 

如果在前面的例子中使用了event.stopPropagation ,那么改变css的p元素上的下一个点击事件将触发,但是如果event.stopImmediatePropagation() ,下一个p点击事件不会触发。

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

2) event.stopImmediatePropagation(): =>它用于停止执行相应的父处理程序,并且除了当前的处理程序之外,还附加处理程序或函数。 =>它也停止连接到整个DOM的当前元素的所有处理程序。

这里是例子: Jsfiddle !

谢谢,-Sahil