stopPropagation 和stopImmediatePropagation区别
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区别的更多相关文章
- js中的stopImmediatePropagation方法和stopPropagation方法的区别
看到e.stopImmediatePropagation()这个方法时,记忆有点模糊了.特地回顾一下. 基本概念 stopImmediatePropagation方法:该方法作用在当前节点及事件链的所 ...
- 浅谈javascript中stopImmediatePropagation函数和stopPropagation函数的区别
在事件处理程序中,每个事件处理程序中间都会有一个event对象,而这个event对象有两个方法,一个是stopPropagation方法,一个是stopImmediatePropagation方法,两 ...
- 【20190415】JavaScript-事件流与stopPropagation()、stopImmediatePropagation()的误区解析
这两天仔细看了一下MDN上关于事件流机制和相关方法的文档,发现有个很大的误区.过去我一直以为stopPropagation()就是用来阻止事件冒泡的,甚至很多博客和菜鸟教程上都是这样写的.但实际上文档 ...
- Js-事件分发与DOM事件流
原文地址:https://www.jianshu.com/p/dc1520327022 Js事件分发与DOM事件流 对JavaScript分发事件不熟悉,网上查阅相关资料整理后,记录一下对Javasc ...
- preventDefault()、stopPropagation()、return false 之间的区别
“return false”之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开 ...
- 转载请注明出处: https://github.com/qiu-deqing/FE-interview
转载请注明出处: https://github.com/qiu-deqing/FE-interview Table of Contents generated with DocToc FE-inter ...
- 移动Web触控事件总结
移动web风风火火几多年,让我这个在Pc端漂流的前端er不免心生仰慕,的确入行几多年,也该是时候进军移动web了.移动web中踩到的第一个坑就是事件问题,所以在吸取众大神的经验后,特作总结以示后来者. ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
- DOM 事件
1.注册事件 // 事件处理函数 function handleMouseOver(event) { // process ...... } p.addEventListener("mous ...
随机推荐
- 个人查阅资料-Sql语句
SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...
- JavaScript encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent()
URI: Uniform Resource Identifier encodeURI() And decodeURI() The encodeURI() function is used to en ...
- Windows Phone8 中如何引用 SQLite 数据库2
本博文编写环境 VS2013 + WP8 SDK 上篇介绍完了SQLite在wp中的部署(具体请参阅 Windows Phone8 中如何引用 SQLite 数据库),下面来看如何使用 SQLite ...
- the core or essence of a computer
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION The ALU is that part ...
- 64位内核注冊tty设备
在64位系统中,注冊tty设备须要注意的是,Android跑在EL0而且在32位模式下,kernel跑在EL1而且在64位模式下,不但内核须要打开CONFIG_COMPAT选项,非常多android上 ...
- c# in deep 之使用匿名方法的内联委托操作
匿名方法允许我们指定一个内联委托的操作,为创建委托实例表达式的一部分.其可以对代码进行极度精简,当然可读性变得很差.下面看一个求平方根的例子. List<int> list = new L ...
- python读写文件相关内容
1.python读取文件 f = open('E:/info.txt', 'r')#用read的方式打开a = 0for line in f.readlines():读取没一行,就是读取所有文件的意思 ...
- 理解WebKit和Chromium: Web应用和Web运行环境
转载请注明原文地址:http://blog.csdn.net/milado_nju 注:鉴于这一领域非常热,自己也投身其中,会单独开辟一个专题介绍Web应用和Web运行环境. ## 概述 Web已经从 ...
- 使用 NumPy 和 Matplotlib 绘制函数图
Numpy是用python进行科学计算的基本程序包. 它主要包含以下功能: ♦强大的n维数组对象 ♦复杂(广播)函数工具 ♦用于集成c/c++和Fortran代码-有用的线性代数 ♦傅里叶变换和随机数 ...
- UNIX环境编程学习笔记（21）——进程管理之获取进程终止状态的 wait 和 waitpid 函数
lienhua342014-10-12 当一个进程正常或者异常终止时,内核就向其父进程发送 SIGCHLD信号.父进程可以选择忽略该信号,或者提供一个该信号发生时即被调用的函数(信号处理程序).对于这 ...