js中.stopPropagation()和.stopImmediatePropagation()的区别

20 篇文章 0 订阅

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

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值