楔子

是不是在火狐用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. PB函数大全【转自 http://blog.csdn.net/xiaoxian8023 】

    Abs()功能计算绝对值.语法Abs ( n )参数n:要得到绝对值的数值型变量或表达式返回值返回值的数据类型与n的数据类型相同,函数执行成功时返回n的绝对值.如果参数n的值为NULL,Abs()函数 ...

  2. Android-Java-synchronized同步代码块的使用场景

    synchronized同步代码块的使用场景 (满足以下两种条件,就要考虑使用synchronize同步代码块了) 1.被synchronized同步代码块{同步的代码},是被多次异步调用,什么叫多次 ...

  3. hdu 1.2.4

    采用异或... #include<stdio.h> int main() { //freopen("input.txt","r",stdin); i ...

  4. execution表达式--小坑

    之前使用的都是eclipse,今天开始复习spring了,开始接触IDEA,在复习过程中,出了点小事, 复习到AOP开发时,有半自动和全自动之说,之前我看那期视频里面没讲过全自动,我就自己再那敲Dem ...

  5. 深入理解String类

    1.String str = "eee" 和String str = new String("eee")的区别 先看一小段代码, public static v ...

  6. 程序猿的日常——Mybatis现学现卖

    最近有一个小项目需求,需要用spring mvc + mybatis实现一个复杂的配置系统.其中遇到了很多不太常见的问题,在这里特意记录下: 主要涉及的内容有 事务 多表删除 插入并返回主键 1 sp ...

  7. dubbo实现原理之动态编译

    Dubbo为了实现基于spi思想的扩展特性,特别是能够灵活添加额外功能,对于扩展或则策略选择的设配类能够动态生成.对于一些需求已知的类如Protocal,它们的设配类代码dubbo可以直接的提供,但是 ...

  8. 解决微信小程序要求的TLS版本必须大于等于1.2的问题

    一.环境: CentOS 6.8 nginx 1.6.0 php 7.0.10 二.背景 最近开发一个小程序,而小程序对后台接口服务器的要求是: 1.请求域名在request合法域名中 2.基于 ht ...

  9. jspm 简介

    借鉴:http://www.jianshu.com/p/4aba847b3e8c 功能 1. 支持加载JavaScript各种模块化的写法:AMD.CommonJS.标准化的ES6模块... 2. 包 ...

  10. [JavaWeb] Servlet Filter

    作用: Servlet 过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 可以将一个或多个 Servlet 过滤器附加到一个 Servlet 或一组 Servlet.Servle ...