这是一个小事件,但当下的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事件的统一处理的更多相关文章

  1. JavaScript一个鼠标滚动事件的实例

    <script type="text/javascript" src="./whenReady.js"></script> <!- ...

  2. javascript 事件委托,jq,js模拟事件

    <!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...

  3. 鼠标滚轮(mousewheel)和DOMMouseScroll事件

    IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mous ...

  4. javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件

    javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件 发布时间:2015-02-07   编辑:www.jquerycn.cn 本文学习下,javascript ...

  5. 在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件

    楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...

  6. 鼠标滚动事件 - onmousewheel

    1.Jquery-MouseWheel jquery默认是不支持支持鼠标滚轮事件(mousewheel) jquery MouseWheel下载:https://github.com/jquery/j ...

  7. JS滚轮mousewheel事件和DOMMouseScroll事件

    滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派. 包括IE6在内的浏览器是使用onmousewheel,而FireFox浏览器一个人使用DOMMouseS ...

  8. JS鼠标滚动事件

    -----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...

  9. vue组件添加鼠标滚动事件

    在一个组件标签上加鼠标滚动事件,应该写成    @mousewheel.native

随机推荐

  1. linux数据库初始化配置

    mysql: 第一次登陆mysql -uroot -p,密码输入直接回车,以空密码登陆 选择数据库:use mysql; UPDATE user SET password=PASSWORD('Java ...

  2. 架构师之路——里氏替换原则LSP

    定义: 如果对每一个对类型为S的对象o1,都有类型为T的对象o2,使得以T定义的所有程序P在所有的对象o1都代换成o2时,程序P的行为没有发生变化,那么类型S是类型T的子类型. 内容: 里氏替换原则通 ...

  3. SQL Server 2008R2 企业版 百度云下载地址

    SQL Server 2008R2 (百度云下载地址:链接: http://pan.baidu.com/s/1mi34II8 密码: yc1w)   ASP.NET MVC4.0+ WebAPI+Ea ...

  4. Redis简单配置和使用

    学到Redis中需要整理和配置的东西比较多,资源也是比较分散!这次的主要还是将知识整合一下,开发过程中所需要的资源整合一下,也方便今后涉及到这块地方的知识时,将时间大量浪费在了找这些资源上了! 一.R ...

  5. mysql 局域网同事之间直接用客户端访问

    情景: 几个人作为小组开发一个项目,以我的机器为服务器,将mysql服务安装在我的机器上,其他小伙伴用客户端都能访问我这个数据库 解决:   首先: 1.设置mysql允许其它机器连接(linux环境 ...

  6. Servlet的监听

    Servlet监听 在<Servlet和Jsp>中我们使用了ServletConfig获取Servlet的初始配置,用ServletContext来获取整个Web应用的初始配置,但如果需要 ...

  7. C++ 11 学习2:空指针(nullptr) 和 基于范围的for循环(Range-based for loops)

    3.空指针(nullptr) 早在 1972 年,C语言诞生的初期,常数0带有常数及空指针的双重身分. C 使用 preprocessor macroNULL 表示空指针, 让 NULL 及 0 分别 ...

  8. 【Unity编程】Unity中的欧拉旋转

    欧拉角的定义 在写这篇博客之前,我搜索了网上很多关于欧拉角的定义,发现大部分引用自维基百科的定义,我这里也引述一下: 维基百科定义 莱昂哈德·欧拉用欧拉角来描述刚体在三维欧几里得空间的取向.对于任何参 ...

  9. PHP学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的PHP学习路线图包含初中高三个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.baidu.com ...

  10. yaourt 之 Curl 错误

    最近执行 yaourt 更新时总是出现以下错误: curl error: Couldn't connect to server 无法进行更新.把配置中的下载工具更换了成 axel 等其它下载工具,还是 ...