楔子

是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation（其实我对浏览器的兼容性看不顺眼已经很久了，殊不知浏览器对我的想法更不顺眼，甚至嗤之以鼻）

注释

言归正传，让我解释一下stopImmediatePropagation的用法：如果多个监听器连接到同一事件类型的同一元素，则按添加监听器的顺序调用它们。如果在一个这样的调用中调用了event. stopimmediatePropagation()，将不会调用剩余的监听器。

实例

我将用DOMMouseScroll事件类型，滚动鼠标轮就触发事件，此事件类型非常兼容FireFox浏览器，其它主流浏览器不支持，再重复一遍，在FireFox运行有效果，其它主流浏览器则没有。

不添加stopImmediatePropagation时，体会冒泡一下。

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Author" content="木人子韦一日尘">

  <title>在FireFox浏览器上，用stopImmediatePropagation阻止冒泡鼠标滚动事件</title>

 </head>

 <body>

  <div id="lwB">

     <div style="width:100px;height:100px;overflow:auto" id="lw">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium. Qui, alias quibusdam eos error minus blanditiis.</div>

  </div>

  <script>

     document.getElementById("lwB").addEventListener("DOMMouseScroll",function(e){

        console.log("我是外面");

     });

     document.getElementById("lw").addEventListener("DOMMouseScroll",function(e){

        //不添加stopImmediatePropagation，如果我滚动鼠标，事件触发，控制台输出“我是里面”的字符，由于此节点的父节点也有相同事件类型的事件，并且符合触发条件，因此，打印输出“我是里面”后，也会打印输出“我是外面”，姑且称它为冒泡。为啥这样？此博不侧重讲这个问题，只注重讲解标题。

        console.log("我是里面");

     })

  </script>

 </body>

</html>

添加stopImmediatePropagation后，体会冒泡怎么就阻止了？

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Author" content="木人子韦一日尘">

  <title>在FireFox浏览器上，用stopImmediatePropagation阻止冒泡鼠标滚动事件</title>

 </head>

 <body>

  <div id="lwB">

     <div style="width:100px;height:100px;overflow:auto" id="lw">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, iure, saepe, temporibus a dolore totam sapiente aliquid culpa mollitia non minus quae praesentium. Qui, alias quibusdam eos error minus blanditiis.</div>

  </div>

  <script>

     document.getElementById("lwB").addEventListener("DOMMouseScroll",function(e){

        console.log("我是外面");

     });

     document.getElementById("lw").addEventListener("DOMMouseScroll",function(e){

        e.stopImmediatePropagation();

        console.log("我是里面");

     })

  </script>

 </body>

</html>

浏览器兼容性

在FireFox浏览器上，用stopImmediatePropagation阻止冒泡鼠标滚动事件的更多相关文章

  1. js阻止冒泡和默认事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. input标签type为number时，输入小数，在Firefox浏览器上输入框标红的问题

    问题一:firefox 下 默认情况 <input   type="number"> 只允许输入整数,输入小数时会报错,输入框被标红 这时候可以添加参数 step=&q ...

  3. js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数

    <!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     & ...

  4. 纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题

    当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果.  我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...

  5. uploadify上传文件Firefox浏览器上传失败解决方法

    近期做文件上传使用到了uploadify 可是出现了各种奇葩的问题.并且针对各个不同浏览器问题不同 在Firefox中.非常坑爹的是.每次上传就丢失session值,可是我的系统在登录.保存文件文件夹 ...

  6. 有关parent.frame.cols在firefox浏览器上不兼容的问题解决

    IE(不兼容FireFox): if(parent.myFrame.cols == "199,7,*") { parent.myFrame.cols="0,7,*&quo ...

  7. 基本event封装：阻止冒泡、默认事件等

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...

  8. jQuery 阻止冒泡和默认事件

    jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...

  9. 给浏览器绑定鼠标滚动事件（兼容FireFox）

    var bs = new Browser(); if(bs.userBrowser() == 'firefox'){ document.body.addEventListener("DOMM ...

随机推荐

  1. 对java高级程序员有益的十本书

    英文原文:http://www.programcreek.com/2013/08/top-books-for-advanced-level-java-developers/ java语言是当今最受欢迎 ...

  2. DXP 板层

    一)DXP-设置板层(D+K )在PCB编辑 Design->Layer Stack Manager(层管理) 1)快捷命令 D + K   进入么多层置管理器 2.鼠标右键 TopLayer- ...

  3. 2.虚拟机安装的ubuntu全屏显示

    虚拟机下面安装了ubuntu系统,显示的屏幕只有那么一小块儿,不知道如何才能全屏,那么如何全屏呢?且看下面经验. 方法/步骤 打开虚拟机,并点击要更改成全屏的那个ubuntu系统的电源 我的虚拟机名字 ...

  4. B样条基函数的定义及系数的意义

    原文链接:http://blog.csdn.net/tuqu/article/details/5177405 贝塞尔基函数用作权重.B-样条基函数也一样:但更复杂.但是它有两条贝塞尔基函数所没有的特性 ...

  5. iis支持asp.net4.0的注册命令使用方法

    32位的Windows: 1. 运行->cmd 2. cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 3. aspnet_regiis.exe ...

  6. ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器

    本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ...

  7. .Net Mvc AutoMapper简单使用

    1.安装automapper nuget包. 2.新建一个AutoMapper配置类并实现一个静态配置方法. 方法一. using AutoMapper; using AutoMapperTest.M ...

  8. 利用Python做绝地科学家(外挂篇)

    i春秋作家:奶权 前言  玩吃鸡时间长的鸡友们 应该都知道现在的游戏环境非常差 特别在高端局 神仙满天飞 搞得很多普通玩家非常没有游戏体验  因为吃鸡的火爆 衍生出了一条巨大的外挂利益链 导致市面上出 ...

  9. C#6.0语言规范(十四) 枚举

    一个枚举类型是一个独特的值类型(值类型)声明一组命名的常量. 这个例子 enum Color { Red, Green, Blue } 声明了一个名为枚举类型Color与成员Red,Green和Blu ...

  10. SQL 将一列多行数据合并为一行

    原表数据: 期望结果: 使用STUFF + FOR XML PATH即可实现以上效果 执行以下SQL: , , '') AS Course FROM Student AS T 可以看到输出结果与期望结 ...