在众多的方法里面，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. 华为OJ题目：刷题

    题目描述: 新入职华为的小伙伴们都有在oj上面刷题的任务,共需要刷100道初级题,45道中级题,5道高级题,其中,做出来的高级题如果超标可以当初级或者中级题,做出来的中级题如果超标可以当初级题.每天, ...

  2. eclipse安装JAVA反编译插件

    前言:在实际的开发中几乎都会使用到一些框架来辅助项目的开发工作,对于一些框架的代码我们总怀有一些好奇之心,想一探究竟,有源码当然更好了,对于有些JAR包中的代码我们就需要利用反编译工具来看一下了,下面 ...

  3. C/C++ 右值引用 及 函数调用栈剖析

    参考: [1]. C/C++堆栈指引: http://www.cnblogs.com/Binhua-Liu/archive/2010/08/24/1803095.html [2]. C++临时变量的生 ...

  4. Ubuntu解压命令大全

    tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)———————————————.gz解压1:gunz ...

  5. java 中小数点的处理

    第一种 BigDecimal bg = new BigDecimal(f); double f1 = bg.setScale(2, BigDecimal.ROUND_HALF_UP).doubleVa ...

  6. 点击弹出固定大小的新窗口（js实现）

    <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') --> </SCRIPT& ...

  7. Maven实战（二）构建简单Maven项目

    上一节讲了maven的安装和配置,这一节我们来学习一下创建一个简单的Maven项目 1. 用Maven 命令创建一个简单的Maven项目 在cmd中运行如下命令: mvn archetype:gene ...

  8. C++中 容易忽视的const 修饰符

    C++可以用const定义常量,也可以用#define定义常量,但是前者比后者有更多的有点: (1)const常量有数据类型,而宏常量没有数据类型.编译器可以对const进行类型安全检查,而后者只进行 ...

  9. POJ 1511 - Invitation Cards 邻接表 Dijkstra堆优化

    昨天的题太水了,堆优化跑的不爽,今天换了一个题,1000000个点,1000000条边= = 试一试邻接表 写的过程中遇到了一些问题,由于习惯于把数据结构封装在 struct 里,结果 int [10 ...

  10. 缓存大全(Memcached、redis、RabbitMQ )

    Memcached: 简介.安装.使用 python操作Memcached Memcached天生支持集群 Redis: 简介.安装.使用.实例 Python操作Redis String.Hash.L ...