stopImmediatePropagation的应用
在众多的方法里面，event.stopImmediatePropagation 算是比较少用的一个方法，拼写上感觉一半像 event.stopPropagation。
对于stopPropagation 的用法大家是众所周知的，他是W3C标准事件方法，用于阻止事件冒泡（非标准情况下，用window.event.stopBubble来阻止冒泡）
而stopImmediatePropagation 的功能比stopPropagation 多一些，除了可以阻止事件冒泡之外，还可以把这个元素绑定的同类型事件也阻止了。
先把下面的代码片断（摘自MDN）
<!DOCTYPE html> <html> <head> <style> p { height: 30px; width: 150px; background-color: #ccf; } div {height: 30px; width: 150px; background-color: #cfc; } </style> </head> <body> <div> <p>paragraph</p> </div> <script> document.querySelector("p").addEventListener("click", function(event) { alert("我是p元素上被绑定的第一个监听函数"); }, false); document.querySelector("p").addEventListener("click", function(event) { alert("我是p元素上被绑定的第二个监听函数"); event.stopImmediatePropagation(); //执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行. }, false); document.querySelector("p").addEventListener("click", function(event) { alert("我是p元素上被绑定的第三个监听函数"); //该监听函数排在上个函数后面,该函数不会被执行. }, false); document.querySelector("div").addEventListener("click", function(event) { alert("我是div元素,我是p元素的上层元素"); //p元素的click事件没有向上冒泡,该函数不会被执行. }, false); </script> </body> </html>
p标签绑定了三个click事件，div绑定了一个click事件。
其中p第二个click事件中使用了event.stopImmediatePropagation();
当点击时P标签时，第一和第二个alert会正常出现，
第三个alert被event.stopImmediatePropagation();的特性取消了以后的同类型(click)事件
第四个alert不出来同被阻止了事件冒泡，所以也不会出现。
相当于做了event.stopPropagation()后，再return false; jQuery对事件代理做了类似的封装。
我们了解特性之后，看一个简单应用场景:
假设点击一个按钮后，需要检测两个input控件的值，值为空时打印'error'，并停止检测下一个input，同时也需停止提单提交。
我们通常可能会这样写：
<!DOCTYPE html> <html> <head> </head> <body>
<form> <input type="text" id="txt1">
<input type="text" id="txt2">
<input type="submit" value="button" id="btn">
</form> <script> var txt1 = document.querySelector("#txt1");
var txt2 = document.querySelector("#txt2"); var btn = document.querySelector("#btn"); btn.addEventListener("click", function(event) { if (txt1.value == '') { alert('error1');
return false; }
if (txt2.value == '') {
alert('error2');
return false; }
return true; }, false); </script> </body> </html>
但用了event.stopImmediatePropagation时，可以对代码进行更好的抽象。
<!DOCTYPE html> <html> <head> </head> <body> <form> <input type="text" id="txt1"> <input type="text" id="txt2"> <input type="submit" value="button" id="btn"> </form> <script> var txt1 = document.querySelector("#txt1"); var txt2 = document.querySelector("#txt2"); var btn = document.querySelector("#btn"); btn.addEventListener("click", function(event) { if (txt1.value == '') { alert('error1'); event.stopImmediatePropagation(); } if (txt2.value == '') { alert('error2'); event.stopImmediatePropagation(); } }, false); btn.addEventListener("click", function() { alert('Done'); }); </script> </body> </html>
题外：
event.isImmediatePropagationStopped 可以用来确定该元素是否有调用过event.stopImmediatePropagation。
浏览器支持情况：
Firefox >=10Chrome
IE >= 9
Opera
Safari
