在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件
楔子
是不是在火狐用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阻止冒泡鼠标滚动事件的更多相关文章
- js阻止冒泡和默认事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- input标签type为number时,输入小数,在Firefox浏览器上输入框标红的问题
问题一:firefox 下 默认情况 <input type="number"> 只允许输入整数,输入小数时会报错,输入框被标红 这时候可以添加参数 step=&q ...
- js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...
- uploadify上传文件Firefox浏览器上传失败解决方法
近期做文件上传使用到了uploadify 可是出现了各种奇葩的问题.并且针对各个不同浏览器问题不同 在Firefox中.非常坑爹的是.每次上传就丢失session值,可是我的系统在登录.保存文件文件夹 ...
- 有关parent.frame.cols在firefox浏览器上不兼容的问题解决
IE(不兼容FireFox): if(parent.myFrame.cols == "199,7,*") { parent.myFrame.cols="0,7,*&quo ...
- 基本event封装:阻止冒泡、默认事件等
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...
- jQuery 阻止冒泡和默认事件
jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...
- 给浏览器绑定鼠标滚动事件(兼容FireFox)
var bs = new Browser(); if(bs.userBrowser() == 'firefox'){ document.body.addEventListener("DOMM ...
随机推荐
- PB函数大全【转自 http://blog.csdn.net/xiaoxian8023 】
Abs()功能计算绝对值.语法Abs ( n )参数n:要得到绝对值的数值型变量或表达式返回值返回值的数据类型与n的数据类型相同,函数执行成功时返回n的绝对值.如果参数n的值为NULL,Abs()函数 ...
- Android-Java-synchronized同步代码块的使用场景
synchronized同步代码块的使用场景 (满足以下两种条件,就要考虑使用synchronize同步代码块了) 1.被synchronized同步代码块{同步的代码},是被多次异步调用,什么叫多次 ...
- hdu 1.2.4
采用异或... #include<stdio.h> int main() { //freopen("input.txt","r",stdin); i ...
- execution表达式--小坑
之前使用的都是eclipse,今天开始复习spring了,开始接触IDEA,在复习过程中,出了点小事, 复习到AOP开发时,有半自动和全自动之说,之前我看那期视频里面没讲过全自动,我就自己再那敲Dem ...
- 深入理解String类
1.String str = "eee" 和String str = new String("eee")的区别 先看一小段代码, public static v ...
- 程序猿的日常——Mybatis现学现卖
最近有一个小项目需求,需要用spring mvc + mybatis实现一个复杂的配置系统.其中遇到了很多不太常见的问题,在这里特意记录下: 主要涉及的内容有 事务 多表删除 插入并返回主键 1 sp ...
- dubbo实现原理之动态编译
Dubbo为了实现基于spi思想的扩展特性,特别是能够灵活添加额外功能,对于扩展或则策略选择的设配类能够动态生成.对于一些需求已知的类如Protocal,它们的设配类代码dubbo可以直接的提供,但是 ...
- 解决微信小程序要求的TLS版本必须大于等于1.2的问题
一.环境: CentOS 6.8 nginx 1.6.0 php 7.0.10 二.背景 最近开发一个小程序,而小程序对后台接口服务器的要求是: 1.请求域名在request合法域名中 2.基于 ht ...
- jspm 简介
借鉴:http://www.jianshu.com/p/4aba847b3e8c 功能 1. 支持加载JavaScript各种模块化的写法:AMD.CommonJS.标准化的ES6模块... 2. 包 ...
- [JavaWeb] Servlet Filter
作用: Servlet 过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 可以将一个或多个 Servlet 过滤器附加到一个 Servlet 或一组 Servlet.Servle ...