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. java使用反射强制给private字段赋值

    今天项目中遇到了一个问题,要调用一个类,并获取这个类的属性进行赋值然后将这个类传递到方法中做为参数. 实际操作时才发现,这个类中的字段属性是私有的,不能进行赋值!没有提供公有的方法.而这个类又是打包成 ...

  2. Xcode打包踩过的那些坑

    一.file was built for archive which is not the architecture being linked (armv7s) 项目是基于cocos2d-x绑定lua ...

  3. HTML5 本地文件操作之FileSystemAPI实例（二）

    文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.we ...

  4. 零基础写python爬虫之使用Scrapy框架编写爬虫

    网络爬虫,是在网上进行数据抓取的程序,使用它能够抓取特定网页的HTML数据.虽然我们利用一些库开发一个爬虫程序,但是使用框架可以大大提高效率,缩短开发时间.Scrapy是一个使用Python编写的,轻 ...

  5. 基于JAVA原生HTTP请求工具类 httphelper

    原文地址;http://lushuifa.iteye.com/blog/2313896 import java.io.BufferedReader; import java.io.BufferedWr ...

  6. 【转载】Qt Creator 添加自定义注释

    原文:https://blog.csdn.net/liang19890820/article/details/54925434 自定义注释注释的原则是有助于对程序的阅读理解,不宜太多,也不能太少(一般 ...

  7. 异常捕获 崩溃 Bugly ACRC 简介 总结 MD

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

  8. 备份VMware虚拟磁盘文件 移植到其他虚拟机

    原文:http://jingyan.baidu.com/article/a681b0de17b3173b1843468f.html 方法/步骤     第一种方法:直接复制本地主机磁盘下的虚拟磁盘文件 ...

  9. [VS2010搭建汇编开发环境win32和x64]

    场景: 1. 虽然使用MASM32也可以编译运行汇编程序,但是既然装了VS2010,它也能支持编译运行汇编吧.不然微软的开发人员难道还不用vs写汇编程序了? http://www.masm32.com ...

  10. Redis学习手册(主从复制)(转)

    一.Redis的Replication: 这里首先需要说明的是,在Redis中配置Master-Slave模式真是太简单了.相信在阅读完这篇Blog之后你也可以轻松做到.这里我们还是先列出一些理论性的 ...