js中stopPropagation和stopImmediatePropagation的区别
先上结论:
.stopPropagation(),会阻止事件继续分发到其他document节点,但是当前节点绑定的多个事件会继续按注册的顺序执行
.stopImmediatePropagation(),不仅阻止事件继续分发到其他document,还会将事件分发就地停止,在当前事件之后注册的其他事件,都不会执行
验证:
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
// stopPropagation()和stopImmediatePropagation()的区别
function my$(id) {
return document.getElementById(id);
}
my$("dv1").addEventListener("click", function (e) {
console.log("dv1");
}, false);
my$("dv2").addEventListener("click", function (e) {
console.log("dv2");
}, false);
my$("dv3").addEventListener("click", function (e) {
console.log("dv3t1"+"----------"+event.eventPhase);
// e.stopImmediatePropagation();
// e.stopPropagation();
}, true);
my$("dv3").addEventListener("click", function (e) {
console.log("dv3t2"+"----------"+event.eventPhase);
// e.stopPropagation();//会执行完所有的"dv3"所注册的事件
e.stopImmediatePropagation();// 在这之下的"dv3"的事件不会执行
}, true);
my$("dv3").addEventListener("click", function (e) {
console.log("dv3f1"+"----------"+event.eventPhase);
}, false);
my$("dv3").addEventListener("click", function (e) {
console.log("dv3f2"+"----------"+event.eventPhase);
}, false);
几点补充
/**
* 在同一个节点的同一个事件阶段,有多个事件待处理,那么会按照注册的顺序执行
* 在目标阶段,同一个节点,有多个事件处理函数要执行,这时候不管是true(捕获)还是false(冒泡),都会按照事件注册顺序执行
*
* .stopPropagation(),会阻止事件继续分发到其他document节点,但是当前节点绑定的多个事件会继续按注册的顺序执行
* .stopImmediatePropagation(),不仅阻止事件继续分发到其他document,还会将事件分发就地停止,在当前事件之后注册的其他事件,都不会执行
*
* IE8的事件,没有捕获阶段,只有目标和冒泡
* window.cancelBubble = true, 不要理解成整个文档都设置了取消冒泡
* 在哪个事件使用,就在哪个事件生效
* 这个属性的设定,和stopPropagation()方法类似,当前节点绑定的多个事件会继续按注册的顺序执行
*
*
*
* 同一个节点的同一种事件,处于同一个事件阶段,事件处理函数是一样的时候
* 如果事件处理函数是匿名函数,那么都会处理,因为匿名函数所在空间不同,本质上是不同的
* 如果是命名函数,那么只会执行一个,因为本质上就是中一个函数
*
*
*/
相关资料:
https://blog.csdn.net/ckxkobe/article/details/84743487
http://www.w3school.com.cn/jsref/event_stoppropagation.asp
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation