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. Android之在string.xml配置文字颜色粗体等效果

    string.xml <string name="exchange_txt_hint"><Data><![CDATA[请使用<font colo ...

  2. 详细解读Volley(四)—— 自定义Request

    Volley中提供了几个Request,如果我们有特殊的需求,完全可以自定义Request的,自定义Request自然要继承Request,那么本篇就教大家来一步一步地定义一个自己的Request类. ...

  3. [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...

  4. STM32学习笔记之EXTI(外部中断)

    參考资料:STM32数据手冊.网络资料 =========================================切割线==================================== ...

  5. Swift3.0:PhotoKit的使用

    一.介绍 iOS8之前使用AssetsLibrary来获取相册资源,iOS新引入框架PhotoKit框架,也即Photos.framework 二.PhotoKit的基本构成包括如下几项: PHAss ...

  6. Log4cplus使用指南

    1.  Log4cplus简介 log4cplus是C++编写的开源的日志系统,前身是java编写的log4j系统,受Apache Software License保护,作者是Tad E. Smith ...

  7. Go语言之高级篇beego框架之参数配置与路由配置

    一.参数配置 beego默认会解析当前应用下的conf/app.conf文件 1.1.beego的参数配置 appname = WEB httpport = 8080 runmode = dev 几种 ...

  8. Linux系统下对NFS服务安全加固的方法

    NFS(Network File System)是 FreeBSD 支持的一种文件系统,它允许网络中的计算机之间通过 TCP/IP 网络共享资源.不正确的配置和使用 NFS,会带来安全问题. 概述 N ...

  9. ACM~排列组合&amp;&amp;hdu例子

    排列组合是数学中的一个分支.在计算机编程方面也有非常多的应用,主要有排列公式和组合公式.错排公式.母函数.Catalan Number(卡特兰数)等. 一.有关组合数学的公式 1.排列公式   P(n ...

  10. CSOM中如何取到managed metadata类型字段的类型信息

    Field.fieldTypeKind返回的是Invalid [解决方法] There is no "Metadata" type of field in the SP.Field ...