在众多的方法里面，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. Extjs 4.2 Grid增删改及后台交互(Java)

    上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...

  2. [Linux]删除7天前的目录

    find /ftp_data/ -mindepth 2 -type d -mtime +7 -exec rm -rf {} \;

  3. 【T电商 3】Nginx的Http（图片）服务器配置+ftp上传使用说明

    在前两篇博客中提到了搭建Nginx和Ftp服务器,在本篇博客,主要是介绍Nginx的配置文件的使用,怎样修改配置文件使其成为一个图片服务器. 一.Nginx图片服务器配置 <span style ...

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

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

  5. Dig out deleted chat messages of App Skype

    Last month Candy was arrested on suspicion of having doing online porn webcam shows, but Candy refus ...

  6. {matlab}取二值图像centroid几种方法性能比较

    试验很简单,取二值图像的质心,三种方法做比较 1.完全采用矩阵性能不做任何循环操作,对find后的值进行除法与取余操作,从而得到centroid 2.完全采用循环操作,最简单明了 3.结合1,2,对每 ...

  7. compile error

    stray \241     程序有非法字符,如空格,引号等,一般因为从别的地方粘贴导致这个错误.

  8. Mysql 与日期和时间相关的函数

    目录: 常用日期函数 时间加减函数 date_forma函数 1. 常用日期函数 now() current_timestamp() sysdate() 实例一: 从上图可以看出三个函数都是用来获取当 ...

  9. 关于form验证的处理片断

    public virtual void SignIn(s_User user, bool createPersistentCookie) { var now = DateTime.UtcNow.ToL ...

  10. Great StackOverflow questions

    1. diffenece between MVC and MVP http://stackoverflow.com/questions/2056/what-are-mvp-and-mvc-and-wh ...