在众多的方法里面，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. iOS开发--一些UITabBarItem属性的设置[转]

    1.改变UITabBarItem 字体颜色 [[UITabBarItemappearance]setTitleTextAttributes:[NSDictionary dictionaryWithOb ...

  2. gcc与makefile编译 BY 四喜三顺

    gcc编译控制过程:(假设源代码为a.c)(1)源文件到预处理文件:    gcc -E -o a.cxx a.c    a.cxx显示调用哪些头文件(2)生成汇编代码:              g ...

  3. sql 简单事务例子

    BEGIN TRY BEGIN TRAN ) BEGIN UPDATE table SET ... END ELSE BEGIN UPDATE table SET ... UPDATE table S ...

  4. 服务器间打通ssh无密钥

    1 打通无密钥 配置HDFS,首先就得把机器之间的无密钥配置上.我们这里为了方便,把机器之间的双向无密钥都配置上. (1)产生RSA密钥信息 ssh-keygen -t rsa 一路回车,直到产生一个 ...

  5. EntityFramework基础

    好久没有学习新东西了,最近研究了下EntityFramework,将基础代码贴出来, Entity Framework 利用了抽象化数据结构的方式,将每个数据库对象都转换成应用程序对象 (entity ...

  6. html-css实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. zip和zippartition总结

    最近在搞spark机器学习项目时,碰到了一些小问题.两个数据集要联到一起.比如rdd1=("abc","cde","dfc"),rdd2=( ...

  8. easyui里弹窗的两种表现形式

    easyui里弹窗的两种表现形式 博客分类: jQueryEasyUi   1.主JSP页面中描绘弹窗   <div id="centerDiv" data-options= ...

  9. linux上的编译安装

    计算机运行的程序都是二进制的代码,那么我们所用的编程语言都是自然语言中的字符,那么就需要有一种机制来将这些转化成二进制代码,那么根据转化机制不一样,编程语言(软件 产生的源头)分两大类 解释型 编译型 ...

  10. URL Quoting

    [URL Quoting] The URL quoting functions focus on taking program data and making it safe for use as U ...