js中的stopImmediatePropagation方法和stopPropagation方法的区别
看到
e.stopImmediatePropagation()
这个方法时,记忆有点模糊了。特地回顾一下。
基本概念
stopImmediatePropagation
方法:该方法作用在当前节点及事件链的所有后续节点上,目的是在执行完当前事件处理程序后,停止当前节点及所有后续节点的同类事件处理程序的运行。stopPropagation
方法:该方法作用在后续节点上,目的在执行完绑定到当前元素上的所有同类事件处理程序后,停止执行所有后续节点的同类事件处理程序。
区别
- 两个方法只差一个
Immediate
stopPropagation
方法,调用后,会立即停止对后续节点的访问,但是会执行完绑定到当前节点上的所有同类事件处理程序;简言之,只能阻止父类元素的冒泡,就是一个元素绑定了多个同类事件(比如click),且父元素也绑定了该类事件,那么在元素调用stopPropagation
方法后,父元素不会执行同类事件,但是该元素绑定的多个同类事件会依次执行。stopImmediatePropagation
方法,调用后,除了所有后续节点,绑定到当前元素上的、当前事件处理程序之后的事件处理程序都不会执行。简言之,既能阻止父类元素冒泡,也能阻止同类事件的执行。假如一个元素绑定了多个同类事件(比如click),且父元素也绑定了该类事件,那么在元素调用stopImmediatePropagation
方法后,父元素不会执行同类事件,该元素执行完当前事件,绑定的同类事件也不会执行。
举例
<div id="div">
<input type="text" id="input"/>
</div>
var dom = document.querySelector('#input');
dom.addEventListener('blur', function (e) {
console.log('blur 1');
});
dom.addEventListener('blur', function (e) {
console.log('blur 2');
});
dom.addEventListener('keyup', function (e) {
console.log('keyup 1');
})
dom.addEventListener('keyup', function (e) {
console.log('keyup 2');
})
dom.addEventListener('click', function (e) {
//e.stopPropagation();
e.stopImmediatePropagation();
console.log('dom click 1');
})
dom.addEventListener('click', function (e) {
console.log('dom click 2');
})
var div = document.querySelector('#div');
div.addEventListener('click', function (e) {
console.log('div click 1');
})
div.addEventListener('click', function (e) {
console.log('div click 2');
})
结果说明:
- 不调用,点击输入框,
dom click 1
,dom click2
,div click 1
,div click2
会依次执行,blur
,keyup
事件触发后也是依次执行。 - 调用
stopPropagation
方法后,点击输入框,dom click 1
,dom click2
会依次执行,但阻止冒泡,父类元素的事同类事件不会执行。blur
,keyup
事件触发后会依次执行。 - 调用
stopImmediatePropagation
方法后,点击输入框,只会执行dom click1
,会阻止冒泡,且当前元素绑定的同类事件也会阻止。blur
,keyup
事件触发后会依次执行。
js中的stopImmediatePropagation方法和stopPropagation方法的区别的更多相关文章
- js中的splice方法和slice方法简单总结
slice:是截取用的 splice:是做删除 插入 替换用的 slice(start,end): 参数: start:开始位置的索引 end:结束位置的索引(但不包含该索引位置的元素) 例如: va ...
- JS中的call()方法和apply()方法用法总结
原文引自:https://blog.csdn.net/ganyingxie123456/article/details/70855586 最近又遇到了JacvaScript中的call()方法和app ...
- JS中的call()方法和apply()方法用法总结(挺好 转载下)
最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1. 每个函数都包含两个非继承而来的方法 ...
- StringUtils工具类中的isBlank()方法和isEmpty()方法的区别
1.isBlank()方法 1 public static boolean isBlank(String str) { 2 int strLen; 3 if (str == null || (strL ...
- Java Thread中,run方法和start方法的区别
两种方法的区别: 1.start方法 用 start方法来启动线程,是真正实现了多线程, 通过调用Thread类的start()方法来启动一个线程,这时此线程处于就绪(可运行)状态,并没有运行,一旦 ...
- js中得call()方法和apply()方法的用法
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方 ...
- [转] JS中的call()方法和apply()方法用法总结
//例1 <script> window.color = 'red'; document.color = 'yellow'; var s1 = {color: 'blue' }; func ...
- MediaPlayer: MediaPlayer中的prepare方法和prepareAsync方法的区别
prepare方法是将资源同步缓存到内存中,一般加载本地较小的资源可以用这个,如果是较大的资源或者网络资源建议使用prepareAsync方法,异步加载.但如果想让资源启动,即start()起来,因为 ...
- Thread中,run方法和start方法的区别
1. 通过调用Thread类中的start()方法可以启动一个线程,但是线程并不是立刻运行,而是处于就绪态,一旦获取cpu时间片,则会立即运行run()方法 2. start()方法实现了多线程运行, ...
随机推荐
- git版本控制工具的使用(1)。
为了使用. 感谢:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 讲解的很清晰, ...
- mysql 表锁进程非常多的情况
今天要说的是mysql 的 MYISAM引擎下的表锁问题. 通常来说,在MyISAM里读写操作是串行的,但当对同一个表进行查询和插入操作时,为了降低锁竞争的频率,根据concurrent_insert ...
- 2019.01.17 bzoj1854: [Scoi2010]游戏(二分图匹配)
传送门 二分图匹配菜题. 题意:nnn个二元组(xi,yi)(x_i,y_i)(xi,yi),每个二元组可以选一个数总共nnn个数aia_iai,问将aia_iai排好序之后从111开始最多可 ...
- 2018.10.26 NOIP模拟 性感手枪(搜索)
传送门 vis[x][y]vis[x][y]vis[x][y]记录这个点是否在之前被搜过,且被搜过的坐标是什么. 然后搜索的时候记录一个循环的下标和不循环的下标就行了. 代码
- PHP时间范围:本周、本月、下月等简写
在阅读TP5.1源码,发现其在时间范围上的写法很特别,个人第一次见,做一次记录 $timeRule = [ 'today' => ['today', 'tomorrow'], 'yesterda ...
- load data妙用
load变量和用户变量的巧妙结合,实现灵活导入字段列(NO.1) LOAD DATA INFILE 'file.csv' INTO TABLE dados_meteo (@var1, @var2) S ...
- 02:PostgreSQL Character Sets
在利用postGIS导入shapefile文件到postgresql数据库的时候,老是提示字符串的问题,或者是乱码,试了好几种都不行,于是度娘之.... 使用默认的UTF8,提示信息是:建议使用LAT ...
- 30条SQL查询优化原则
在我们平常的SQL查询中,其实我们有许多应该注意的原则,以来实现SQL查询的优化,本文将为大家介绍30条查询优化原则. 首先应注意的原则 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 wher ...
- #微码分享#C++变参字符串格式化函数format_string
在C和C++中,变参格式化函数虽然非类型安全,但却十分便利,因为得到广泛使用.对于常见的size_t类型要用“%zu”,ssize_t用”%zd“,int64_t用“% ”PRId64,uint64_ ...
- Application-identifier entitlement does not match问题的解决
以下是一个老外的回答: This happened to me after installing a build from TestFlight and overwriting it with the ...