楔子

是不是在火狐用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. nginx实现unigui群集

    nginx实现unigui群集 在笔者写此文的时候,UNIGUI1.50.x的版本已经发布,其提供的HyperServer已经支持群集. 有网友还专门为此做了群集方面的测试: 从上图可以看出:群集总共 ...

  2. impress.js 中文注释

    impress.js 中文注释 玄魂 /** * impress.js *(本翻译并未完全遵照原作者的注释翻译) * Impress.js 是受 Prezi启发,基于现代浏览器的 CSS3 与 Jav ...

  3. C# 用户选择单个压缩－系统自带压缩

    //用C#自带的压缩,最少要.net4.5或以上,先增加引用 System.IO.Compression.FileSystem // FolderBrowserDialog dlg = new Fol ...

  4. Django 实现第三方账号登录网站

    这里我们使用 django-allauth 模块来实现第三方账号验证登录,官方文档如下:https://django-allauth.readthedocs.io/en/latest/ . 安装 dj ...

  5. Windows安装python3.x后，pip list警告！DEPRECATION: The default format will switch to columns in the future.

    前言(凑字数专用) 这个警告虽然不影响你的正常使用,但是每次都好几行红色警告,总是给人一种怪怪的感觉(当然不是FBI的警告了……),所以咱们还是把他解决掉~ 网上好多解决办法都是Ubuntu的解决办法 ...

  6. centos7搭建kafka集群-第二篇

    好了,本篇开始部署kafka集群 Zookeeper集群搭建 注:Kafka集群是把状态保存在Zookeeper中的,首先要搭建Zookeeper集群(也可以用kafka自带的ZK,但不推荐) 1.软 ...

  7. 剑指offer二十之包含min函数的栈

    一.题目 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数. 二.思路 用一个栈dataStack保存数据,用另外一个栈minStack保存依次入栈最小的数.每次元素存入minSt ...

  8. Linux下安装Nginx详细图解教程 (nginx-1.2.6)

    什么是Nginx? Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器,在高连接并发的情况下N ...

  9. GPS/轨迹追踪、轨迹回放、围栏控制

    折腾一个多月终于弄完了这个项目,起初都未曾接触GPS/轨迹追踪.轨迹回放.圈划围栏...等一些在百度地图或者Googel地图操作的一些业务,后端的业务相对来说简单点 cas单点登录,mongdb灵活的 ...

  10. Spring4 mvc+maven 框架搭建（2）

    在上一篇博客中,数据库数据和mybatis相关的java代码已经生成,接下来就可以使用IDE工具来搭建框架了. 在这里,我使用maven构建和管理代码,使用jdk1.8环境. 首先打开Eclipse, ...