在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 ...
随机推荐
- 方案dp。。
最近经常做到组合计数的题目,每当看到这种题目第一反应总是组合数学,然后要用到排列组合公式,以及容斥原理之类的..然后想啊想,最后还是不会做.. 但是比赛完之后一看,竟然是dp..例如前几天的口号匹配求 ...
- shell 命令 bc linux下的计算器
bc命令 在linux环境下的计算器.
- Swift3 重写一个带占位符的textView
class PlaceStrTextView: UIView,UITextViewDelegate{ var palceStr = "即将输入的信息" //站位文字 var inp ...
- poj 3321 单点更新 区间求和
Apple Tree Time Limit: 2000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Java c ...
- 在线团队协作工具+在线UML工具
话不多说直接上https://worktile.com去看,顺便附上小众软件上面的介绍 默默增加worktile的外国原版https://trello.com/,worktile照着trello做的, ...
- C#读取excel文件提示未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序
错误描述: 在VS2010执行读取excel文件时,报错"未在本地计算机上注册"Microsoft.ACE.OLEDB.12.0"提供程序" 业务代码: //下 ...
- C# byte和10进制、16进制相互转换
var SRMP = new byte[4]; Array.Copy(Encoding.UTF8.GetBytes(1.ToString("x2")), SRMP, Encodin ...
- 解决网页出现 net::ERR_ABORTED 404 (Not Found)问题
1.在web.config配置文件中添加woff字体的MIME类型 在Web.config中的system.webServer节点添加 <staticContent> <remove ...
- WPF Bitmap转成Imagesource的性能优化
之前有个需求是在WPF中生成二维码,用的是QRCoder. QRCoder生成的是Bitmap,在wpf中需要转换成ImageSource才能显示. 之前的转换方式是: IntPtr hBitmap ...
- c++中的一些计算的问题
要实现小数的四舍五入, float a = 3.456; //保留到小数点后两位 float b =(int)((a * 100) + 0.5) / 100.0; 但是这样对负数不好使, 对负数的话, ...