鼠标滚动:mousewheel事件在Firefox采用DOMMouseScroll事件的统一处理
这是一个小事件,但当下的WEB应用交互非常丰富,判断鼠标的滚动来执行相应的操作是比较常见的。我用Chrome/IE/Firefox/Opera 4种浏览器做测试,发现只有firefox的处理方法有很大的不同,下面细说一下这个情况:
第1、事件的名称不同
其它浏览器均采用mousewheel做为事件的名称,而Firefox采用DOMMouseScroll做为事件的名称,为了兼容,那我们就得绑定两次事件,如下:
document.addEventListener('mousewheel', handlerMouseWheel);
document.addEventListener('DOMMouseScroll', handlerMouseWheel);
第2、判断滚轮的方向和值均不同
其它浏览器均是向上滚动为正值(+120)、向下滚动为负值(-120)。而Firefox则是向上滚动为负值(-5),向下滚动为正值(+5)。
第3、包装event对象不同
Firefox对滚轮滚动的值保存在event对象中的detail属性里,而其它浏览器保存在event对象中的wheelDelta属性。
为了方便统一处理,我们还得编写一个函数,让firefox与其它浏览器的取值与方向相同,代码如下:
var getWheelDelta = function(event) {
return event.wheelDelta || (-event.detail * 24);
}
上面采用-event.detail来保持方向一致,放大24倍来保持值一致。(保持一次并非必需的,但有些情况下保持一致有利于处理)
鼠标滚动:mousewheel事件在Firefox采用DOMMouseScroll事件的统一处理的更多相关文章
- JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- 鼠标滚轮(mousewheel)和DOMMouseScroll事件
IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mous ...
- javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件
javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件 发布时间:2015-02-07 编辑:www.jquerycn.cn 本文学习下,javascript ...
- 在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件
楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...
- 鼠标滚动事件 - onmousewheel
1.Jquery-MouseWheel jquery默认是不支持支持鼠标滚轮事件(mousewheel) jquery MouseWheel下载:https://github.com/jquery/j ...
- JS滚轮mousewheel事件和DOMMouseScroll事件
滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派. 包括IE6在内的浏览器是使用onmousewheel,而FireFox浏览器一个人使用DOMMouseS ...
- JS鼠标滚动事件
-----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...
- vue组件添加鼠标滚动事件
在一个组件标签上加鼠标滚动事件,应该写成 @mousewheel.native
随机推荐
- jvm系列(八):jvm知识点总览-高级Java工程师面试必备
在江湖中要练就绝世武功必须内外兼备,精妙的招式和深厚的内功,武功的基础是内功.对于武功低(就像江南七怪)的人,招式更重要,因为他们不能靠内功直接去伤人,只能靠招式,利刃上优势来取胜了,但是练到高手之后 ...
- 华为HG8245 电信 光猫破解获取超级密码
这款光猫是 猫+无线路由器一体的 默认没有打开路由功能. 光猫背后的用户名和密码是有限制的没人什么用处,如果要打开路由功能就得要有 超级用户名和密码 不然就算收的到无线连的起也上不了网 .这时就需要 ...
- C#基础——数组(冒泡排序)
数组 所谓数组,就是相同数据类型的元素按一定的顺序的集合,就是把有限个类型相同的变量用一个名字来命名,然后用编号区分他们的变量的集合,这个名字称为数组名,编号称为下标.组成数组的各个变量称为数组的分量 ...
- mfc---添加背景图
添加背景图: CDC m_dcMem CBitmap m_bmpMem CDC * pDC = GetDC(); m_dc.CreateComparableDC(pDC); m_bmpMem.Load ...
- MyBatis 使用Generator自动生成Model , Dao, mapper
最近 我新建了一 个maven 项目,使用的是spring + springmvc + mybatis框架. 听说Mybatis可以自动生成model和mapper以及dao层,我就从网上查了查资 ...
- 你知道自己执行的是哪个jre吗?
多个JRE 我在做<Java日志工具之java.util.logging.Logger>的DEMO时,修改java.util.logging.Logger的配置文件,怎么修改都不起作用,因 ...
- 常见的html面试题
1.doctype作用?标准模式和兼容模式各有什么区别? (1).<doctype>声明位于文档第一行,在<html>标签之前.用于告知浏览器的解析器以什么样的标准解析该文档. ...
- Spring IOC容器中Bean的生命周期
1.IOC容器中Bean的生命周期 构造器函数 设置属性 初始化函数(在Bean配置中 init-method) 使用Bean 结束时关闭容器(在Bean中配置destroy-method) 2.Be ...
- 20144306《网络对抗》MAL_逆向与Bof基础
实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...
- 使用git克隆指定分支的代码
今天想学习一下开源中国Android客户端的app源码,源码的Git地址:http://git.oschina.net/oschina/android-app,如下图所示: 由于Master主分支上没 ...