在众多的方法里面,event.stopImmediatePropagation 算是比较少用的一个方法,拼写上感觉一半像 event.stopPropagation。
对于stopPropagation 的用法大家是众所周知的,他是W3C标准事件方法,用于阻止事件冒泡(非标准情况下,用window.event.stopBubble来阻止冒泡)
而stopImmediatePropagation 的功能比stopPropagation 多一些,除了可以阻止事件冒泡之外,还可以把这个元素绑定的同类型事件也阻止了。

先把下面的代码片断(摘自MDN)

<!DOCTYPE html>
<html>
<head>
<style>
p { height: 30px; width: 150px; background-color: #ccf; }
div {height: 30px; width: 150px; background-color: #cfc; }
</style>
</head>
<body>
<div>
<p>paragraph</p>
</div>
<script>
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第一个监听函数");
}, false);
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第二个监听函数");
event.stopImmediatePropagation();
//执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
}, false);
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第三个监听函数");
//该监听函数排在上个函数后面,该函数不会被执行.
}, false);
document.querySelector("div").addEventListener("click", function(event)
{
alert("我是div元素,我是p元素的上层元素");
//p元素的click事件没有向上冒泡,该函数不会被执行.
}, false);
</script>
</body>
</html>

p标签绑定了三个click事件,div绑定了一个click事件。
其中p第二个click事件中使用了event.stopImmediatePropagation();
当点击时P标签时,第一和第二个alert会正常出现,
第三个alert被event.stopImmediatePropagation();的特性取消了以后的同类型(click)事件
第四个alert不出来同被阻止了事件冒泡,所以也不会出现。
相当于做了event.stopPropagation()后,再return false;  jQuery对事件代理做了类似的封装。

我们了解特性之后,看一个简单应用场景:

假设点击一个按钮后,需要检测两个input控件的值,值为空时打印'error',并停止检测下一个input,同时也需停止提单提交。
我们通常可能会这样写:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="text" id="txt1">
     <input type="text" id="txt2">
<input type="submit" value="button" id="btn">
</form>
<script>
var txt1 = document.querySelector("#txt1");
       var txt2 = document.querySelector("#txt2");
var btn = document.querySelector("#btn");
btn.addEventListener("click", function(event) {
if (txt1.value == '') {
alert('error1');
return false;
}
          if (txt2.value == '') {
alert('error2');
return false;
}
return true;
}, false);
</script>
</body>
</html>

但用了event.stopImmediatePropagation时,可以对代码进行更好的抽象。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="text" id="txt1">
     <input type="text" id="txt2">
<input type="submit" value="button" id="btn">
</form>
<script>
var txt1 = document.querySelector("#txt1");
      var txt2 = document.querySelector("#txt2");
var btn = document.querySelector("#btn"); btn.addEventListener("click", function(event) {
if (txt1.value == '') {
alert('error1');
event.stopImmediatePropagation();
}
        if (txt2.value == '') {
alert('error2');
event.stopImmediatePropagation();
} }, false);
      
btn.addEventListener("click", function() {
alert('Done');
});
</script>
</body>
</html>

题外:
event.isImmediatePropagationStopped 可以用来确定该元素是否有调用过event.stopImmediatePropagation。

浏览器支持情况:
Firefox >=10Chrome
IE >= 9
Opera
Safari

stopImmediatePropagation的应用的更多相关文章

  1. 浅谈javascript中stopImmediatePropagation函数和stopPropagation函数的区别

    在事件处理程序中,每个事件处理程序中间都会有一个event对象,而这个event对象有两个方法,一个是stopPropagation方法,一个是stopImmediatePropagation方法,两 ...

  2. 【20190415】JavaScript-事件流与stopPropagation()、stopImmediatePropagation()的误区解析

    这两天仔细看了一下MDN上关于事件流机制和相关方法的文档,发现有个很大的误区.过去我一直以为stopPropagation()就是用来阻止事件冒泡的,甚至很多博客和菜鸟教程上都是这样写的.但实际上文档 ...

  3. jQuery preventDefault() ,stopPropagation(),stopImmediatePropagation()

    preventDefault()函数用于阻止当前触发事件的默认行为. 在HTML文档中,当我们触发某些DOM元素的特定事件时,可以执行该元素的默认行为.比如链接的click事件:当我们点击一个链接时, ...

  4. perventDefault, stopPropagation, stopImmediatePropagation 三者的区别

    event有三种特别容易混淆的方法, 用来阻止默认事件的发生 1.  e.preventDefault(); 2. e.stopPropagation(); 3. e.stopImmediatePro ...

  5. js中的stopImmediatePropagation方法和stopPropagation方法的区别

    看到e.stopImmediatePropagation()这个方法时,记忆有点模糊了.特地回顾一下. 基本概念 stopImmediatePropagation方法:该方法作用在当前节点及事件链的所 ...

  6. 在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件

    楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...

  7. stopPropagation 和stopImmediatePropagation区别

    1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  8. stopImmediatePropagation和stopPropagation (事件、防止侦听)

    参考: ActionScript 3.0 Step By Step系列(六):学对象事件模型,从点击按扭开始 actionscript宝典 一.事件模型 egret中的事件模型和flash是一样的,但 ...

  9. stopPropagation / stopImmediatePropagation

      stopPropagation()只会阻止冒泡或者是捕获. stopImmediatePropagation()会阻止该元素的其他事件发生,但是stopPropagation就不会阻止其他事件的发 ...

随机推荐

  1. 【VB.NET】类绑定控件,实现文本框快捷键全选

    Public Class KeyBinder Public Sub BindControl(ByRef CControl As TextBox) AddHandler CControl.KeyDown ...

  2. ImageMagick之PDF转换成图片(image)

    安装完ImageMagick之后,直接执行“magick convert f:\parseWord\tmp\testpdf.pdf f:\parseWord\tmp\testpdf.jpg”,会报错: ...

  3. 链接测试工具xenu link sleuth的使用

    链接测试工具xenu link sleuth的使用很简单. 可以从这里下载 http://home.snafu.de/tilman/xenulink.html 但是注意到: 如果需要登录才能进入所有的 ...

  4. Android开发--adb,SQLite数据库运用

    一.玩转adb  adb的全称为Android Debug Bridge,就是起到调试桥的作用.   adb有什么用?:借助adb工具,我们可以管理设备或手机模拟器的状态.还可以进行很多手机操作,如安 ...

  5. Linxu学习之03_LInux文件与目录管理

    同样只介绍相关命令 这节相关主要的命令有这些: 1.目录的相关操作 cd----切换目录 pwd----显示当前目录 mkdir----新建一个新的目录 rmdir----删除一个空的目录

  6. Redis的主从同步复制

    先来看一下Redis的主从同步复制的原理: 在Slave启动并连接到Master之后,它将主动发送一条SYNC命令.此后Master将启动后台存盘进程,同时收集所有接收到的用于修改数据集的命令,在后台 ...

  7. exports 和 module.exports 的区别

    https://cnodejs.org/topic/5231a630101e574521e45ef8 //一句话总结:exports是对module.exports的引用,require()返回的是 ...

  8. ted be grateful

    -------------------------------------------------------------- David Steindl-Rast: Want to be happy? ...

  9. isa指针

    转载自 http://www.cnblogs.com/zhangdashao/p/4438540.html 可以去这里看详细的. 每个Objective-C对象都有一个隐藏的数据结构,这个数据结构是O ...

  10. SilverLight - Memory Leak

    There is a memory leak issue in current silverlight project. It occurs in the search function: the m ...