看到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 1dom click2div click 1div click2会依次执行,blurkeyup事件触发后也是依次执行。
  • 调用stopPropagation方法后,点击输入框,dom click 1dom click2会依次执行,但阻止冒泡,父类元素的事同类事件不会执行。blurkeyup事件触发后会依次执行。
  • 调用stopImmediatePropagation方法后,点击输入框,只会执行dom click1,会阻止冒泡,且当前元素绑定的同类事件也会阻止。blurkeyup事件触发后会依次执行。

js中的stopImmediatePropagation方法和stopPropagation方法的区别的更多相关文章

  1. js中的splice方法和slice方法简单总结

    slice:是截取用的 splice:是做删除 插入 替换用的 slice(start,end): 参数: start:开始位置的索引 end:结束位置的索引(但不包含该索引位置的元素) 例如: va ...

  2. JS中的call()方法和apply()方法用法总结

    原文引自:https://blog.csdn.net/ganyingxie123456/article/details/70855586 最近又遇到了JacvaScript中的call()方法和app ...

  3. JS中的call()方法和apply()方法用法总结(挺好 转载下)

    最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1. 每个函数都包含两个非继承而来的方法 ...

  4. StringUtils工具类中的isBlank()方法和isEmpty()方法的区别

    1.isBlank()方法 1 public static boolean isBlank(String str) { 2 int strLen; 3 if (str == null || (strL ...

  5. Java Thread中,run方法和start方法的区别

     两种方法的区别: 1.start方法 用 start方法来启动线程,是真正实现了多线程, 通过调用Thread类的start()方法来启动一个线程,这时此线程处于就绪(可运行)状态,并没有运行,一旦 ...

  6. js中得call()方法和apply()方法的用法

    方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方 ...

  7. [转] JS中的call()方法和apply()方法用法总结

    //例1 <script> window.color = 'red'; document.color = 'yellow'; var s1 = {color: 'blue' }; func ...

  8. MediaPlayer: MediaPlayer中的prepare方法和prepareAsync方法的区别

    prepare方法是将资源同步缓存到内存中,一般加载本地较小的资源可以用这个,如果是较大的资源或者网络资源建议使用prepareAsync方法,异步加载.但如果想让资源启动,即start()起来,因为 ...

  9. Thread中,run方法和start方法的区别

    1. 通过调用Thread类中的start()方法可以启动一个线程,但是线程并不是立刻运行,而是处于就绪态,一旦获取cpu时间片,则会立即运行run()方法 2. start()方法实现了多线程运行, ...

随机推荐

  1. git版本控制工具的使用(1)。

    为了使用. 感谢:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 讲解的很清晰, ...

  2. mysql 表锁进程非常多的情况

    今天要说的是mysql 的 MYISAM引擎下的表锁问题. 通常来说,在MyISAM里读写操作是串行的,但当对同一个表进行查询和插入操作时,为了降低锁竞争的频率,根据concurrent_insert ...

  3. 2019.01.17 bzoj1854: [Scoi2010]游戏(二分图匹配)

    传送门 二分图匹配菜题. 题意:nnn个二元组(xi,yi)(x_i,y_i)(xi​,yi​),每个二元组可以选一个数总共nnn个数aia_iai​,问将aia_iai​排好序之后从111开始最多可 ...

  4. 2018.10.26 NOIP模拟 性感手枪(搜索)

    传送门 vis[x][y]vis[x][y]vis[x][y]记录这个点是否在之前被搜过,且被搜过的坐标是什么. 然后搜索的时候记录一个循环的下标和不循环的下标就行了. 代码

  5. PHP时间范围:本周、本月、下月等简写

    在阅读TP5.1源码,发现其在时间范围上的写法很特别,个人第一次见,做一次记录 $timeRule = [ 'today' => ['today', 'tomorrow'], 'yesterda ...

  6. load data妙用

    load变量和用户变量的巧妙结合,实现灵活导入字段列(NO.1) LOAD DATA INFILE 'file.csv' INTO TABLE dados_meteo (@var1, @var2) S ...

  7. 02:PostgreSQL Character Sets

    在利用postGIS导入shapefile文件到postgresql数据库的时候,老是提示字符串的问题,或者是乱码,试了好几种都不行,于是度娘之.... 使用默认的UTF8,提示信息是:建议使用LAT ...

  8. 30条SQL查询优化原则

    在我们平常的SQL查询中,其实我们有许多应该注意的原则,以来实现SQL查询的优化,本文将为大家介绍30条查询优化原则. 首先应注意的原则 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 wher ...

  9. #微码分享#C++变参字符串格式化函数format_string

    在C和C++中,变参格式化函数虽然非类型安全,但却十分便利,因为得到广泛使用.对于常见的size_t类型要用“%zu”,ssize_t用”%zd“,int64_t用“% ”PRId64,uint64_ ...

  10. Application-identifier entitlement does not match问题的解决

    以下是一个老外的回答: This happened to me after installing a build from TestFlight and overwriting it with the ...