1、示例代码

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>stopPropagation 和stopImmediatePropagation区别</title>

    </head>

    <body>

        <div id="app1">

            <div id="app2">

                <div id="app3">

                    test

                </div>

            </div>

        </div>

        <script type="text/javascript">

            let app1 = document.getElementById('app1'),

                app2 = document.getElementById('app2'),

                app3 = document.getElementById('app3');

            app1.addEventListener('click', e => {

                alert('第二次执行')

            },false)

            app3.addEventListener('click', e => {

//                e.stopPropagation()

//                e.stopImmediatePropagation()

                alert('第一次执行')

            },false)

            app3.addEventListener('click', e => {

                alert('app2第二次执行')

            },false)

        </script>

    </body>

</html>

2、区别

stopPropagation 和stopImmediatePropagation都能防止事件向父节点冒泡。

stopImmediatePropagation还能阻止该元素剩余的其他事件处理函数的执行。即加上dom1上绑定了2个click事件，在第一个click事件上执行了e.stopImmediatePropagation()后，第二个click事件不会执行。

参考：http://www.365mini.com/page/jquery-event-stopimmediatepropagation.htm

stopPropagation 和stopImmediatePropagation区别的更多相关文章

  1. js中的stopImmediatePropagation方法和stopPropagation方法的区别

    看到e.stopImmediatePropagation()这个方法时,记忆有点模糊了.特地回顾一下. 基本概念 stopImmediatePropagation方法:该方法作用在当前节点及事件链的所 ...

  2. 浅谈javascript中stopImmediatePropagation函数和stopPropagation函数的区别

    在事件处理程序中,每个事件处理程序中间都会有一个event对象,而这个event对象有两个方法,一个是stopPropagation方法,一个是stopImmediatePropagation方法,两 ...

  3. 【20190415】JavaScript-事件流与stopPropagation()、stopImmediatePropagation()的误区解析

    这两天仔细看了一下MDN上关于事件流机制和相关方法的文档,发现有个很大的误区.过去我一直以为stopPropagation()就是用来阻止事件冒泡的,甚至很多博客和菜鸟教程上都是这样写的.但实际上文档 ...

  4. Js-事件分发与DOM事件流

    原文地址:https://www.jianshu.com/p/dc1520327022 Js事件分发与DOM事件流 对JavaScript分发事件不熟悉,网上查阅相关资料整理后,记录一下对Javasc ...

  5. preventDefault()、stopPropagation()、return false 之间的区别

    “return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...

  6. 转载请注明出处: https://github.com/qiu-deqing/FE-interview

    转载请注明出处: https://github.com/qiu-deqing/FE-interview Table of Contents generated with DocToc FE-inter ...

  7. 移动Web触控事件总结

    移动web风风火火几多年,让我这个在Pc端漂流的前端er不免心生仰慕,的确入行几多年,也该是时候进军移动web了.移动web中踩到的第一个坑就是事件问题,所以在吸取众大神的经验后,特作总结以示后来者. ...

  8. jQuery源代码学习之九—jQuery事件模块

    jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...

  9. DOM 事件

    1.注册事件 // 事件处理函数 function handleMouseOver(event) { // process ...... } p.addEventListener("mous ...

随机推荐

  1. VS2010Web默认的浏览器设置和VS里调试JavaScript代码的设置

    前言 重装系统后,VS调用的Web浏览器不是IE了,VS调式不了JavaScript代码了.这两天一直在试终于搞定了.这里查找的问题当然主要是VS里面调式JavaScript代码了. 第一种方式设置V ...

  2. 【周年庆】china-pub 14周年庆感恩回馈四波狂热来袭

    活动主题:china-pub 14周年庆感恩回馈四波狂热来袭活动说明:[第1波]电子书免费抢!10万好书 65折封顶!              活动规则:              1.活动期间内凡 ...

  3. Git项目的初始化

    快速设置— 如果你知道该怎么操作,直接使用下面的地址 git@github.com:username/myproject.git 我们强烈建议所有的git仓库都有一个README, LICENSE,  ...

  4. Ubuntu下搭建Hyperledger Fabric v1.0环境

      多次尝试才正常启动了Fabric,如遇到各种莫名错误,请参考如下一步步严格安装,特别用户权限需要注意. 一.安装Ubuntu16 虚拟机或双系统,虚拟机有VirtualBox或者VMware,Ub ...

  5. Intel的AVX2指令集解读

    原文链接:http://blog.csdn.net/vbskj/article/details/38408213 在Intel Sandy Bridge微架构中,Intel引入了256位SIMD扩展A ...

  6. Java Singleton Implementation

    概述 Java中单例模式的实现有多重方法, 要实现单例模式主要的问题是线程安全问题以及对Lazy Load的考虑,主要有如下几种 双重锁定懒加载单例 预加载单例 枚举单例 双重锁定懒加载单例模式 /* ...

  7. Proxy 动态代理 InvocationHandler CGLIB MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. 一款基于TweenMax跟随鼠标单击移动的div

    今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  9. Nginx配置基于多域名、端口、IP的虚拟主机

    原文:https://www.cnblogs.com/ssgeek/p/9220922.html ------------------------------- Nginx配置基于多域名.端口.IP的 ...

  10. Is there anyway to discover which ip addresses are connected to the db?

    From mongo shell run db.currentOp() to show all active connections or db.currentOp(true) to show all ...