在众多的方法里面，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. 8，SFDC 管理员篇 - 数据模型 - 公式和验证 2

    1, Checkbox 只接受真值或者假值 And(arg1, arg2....)至少两个参数,只有参数都为真时候,才返回真,只要有一个为假,就都为假 例如:AND(DoNotCall, HasOpt ...

  2. C#通过安全证书生成签名和验签辅助类

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

  3. java中常用数据类型转换器

    /** * 把String转换成long * * @param src 要转换的String * @param def 转换失败时返回此值 * @return 转换好的long */ public s ...

  4. SQL笔记-第五章，函数

    一.数学函数 功能 函数名  用法 绝对值  ABS()    指数  POWER() POWER(FWeight,-0.5)  平方根  SQRT()    求随机数  RAND()    舍入到最 ...

  5. 44. 普通对象建一个用户方法，提交时报：失败:建立业务逻辑对象失败:业务逻辑定义更新到数据库失败:ORA-00904: "DEFVERSION": 标识符无效

    LBBIZPROCESSDEFSLBHISTORYBIZPROCESSDEFSLBHISTORYMULTIWFDEFSDESIGNLBHISTORYWORKFLOWDEFSDESIGNLBMULTIW ...

  6. Bootstrap 更改Navbar默认样式

    alt+shift+n 新建文件ctrl+shift+/ 注释ctrl+shift+f 重新排版代码ctrl+/ 注释 /* navbar */.navbar-default { background ...

  7. 基于PHP生成静态页的实现方法

    t1.php 复制代码 代码如下: <?php// 方法一根据模版生成静态页面// replaceTemplateString函数用于替换模板中指定字符串function replaceTemp ...

  8. js中object类型模拟java中的map

  9. 济南学习D2T1__折纸带

    他[问题描述]一张长度为n的纸带,我们可以从左至右编号为0 −n(纸带最左端标号为0) .现在有m次操作,每次将纸带沿着某个位置进行折叠,问所有操作之后纸带的长度是多少.[输入格式]第一行两个数字n, ...

  10. 安卓 io流 写入文件，再读取的基本使用

    1.布局 布局里面只有一个EditView,通过输入内容之后,当触发 onDestroy 方法时,将输入的数据存储在当前应用的data/data/files文件夹下. <?xml version ...