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> ， document和window ）。
但是，现在，如果在第一个事件处理程序中使用event.stopImmediatePropagation() ，那么<td>的另外两个事件处理程序将不会运行 ，并且不会传播到<tr> ， <table>不会上升到<body> ， <html> ， document和window ）。
请注意，这不仅仅适用于<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
