在众多的方法里面，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. 剑指Offer:面试题23——从上往下打印二叉树(java实现)

    问题描述: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: 按照层次遍历的方法,使用队列辅助. 1.将根结点加入队列. 2.循环出队,打印当前元素,若该结点有左子树,则将其加入队列,若 ...

  2. iScroll滚动区域中select、input、textarea元素无法点击的Bug修复

    最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...

  3. web语义化与h5新增标签

    Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.”   Web语义化有三个阶段: 1.h1~h6.thead.ul. ...

  4. newCachedThreadPool线程池

    public static ExecutorService newCachedThreadPool()创建一个可根据需要创建新线程的线程池,但是在以前构造的线程可用时将重用它们.对于执行很多短期异步任 ...

  5. BootLoader 详解（3）

    BootLoader的stage2 stage2的代码是C语言来实现的,以便于实现更复杂的功能和取得更好的代码可读性和移植性.它与普通C语言程序不同的是,在编译和链接BootLoader这样的程序时, ...

  6. Android_layout 布局（一）

    今天主要学习了Android 的layout布局. Android layout 布局一般分为五种: LinearLayout (线性布局) :子组件按照垂直或者水平方向来布局. RelativeLa ...

  7. php解析json数组

    function urltest(){ $url='http://121.43.153.80:8983/solr/collection1/select?q=+searchkey%3a%E4%BC%9A ...

  8. POJ 2155 Matrix （二维树状数组）

    Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 17224   Accepted: 6460 Descripti ...

  9. Android 中的 WebView实现 Html5 标签网页加载

    自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit解析网页各个节点,这个改变,使得WebView的性能大幅度提升,并 ...

  10. 在ASP.NET中上传附件

    前台页面使用ASP控件:<asp:FileUpload ID="FileUpload" runat="server" Style="margin ...