这是一个小事件,但当下的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. .Net小白的第一篇博客

    2016年8月8日,经过了一周的纠结.我决定放弃了,原来学了六年并且工作两年的学前教育,走上了开发的道路.我认为生活就应该这样,就应该充满挑战,而不是每天在重复相同的工作!作为插班生的我,于2016年 ...

  2. WPF 自定义图片按钮

    此文档仅仅是一个BaseCode,已做后续查阅 XAML代码: <Button x:Class="IM.UI.UC.IM_ImageButton" xmlns="h ...

  3. webpack(四)处理 css\less\sass 样式

    (一) 处理普通的.css 文件,需要安装 css-loader,style-loader .less 文件,需要安装 less-loader .sass 文件,需安装  less-loader np ...

  4. 五金配件行业ERP解决方案

    五金行业信息化需求分析 “国内竞争国际化,国际竞争国内化”将是近几年我国五金行业发展的特点,中国作为全球五金制造中心的地位将进一步稳固.随着中国融入全球经济环境进程的加快以及经济实力的快速崛起,中国已 ...

  5. ajax bookstrap美化网页,并实现页面的加载,删除与查看详情

    Bookstrap:美化页面: Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS ...

  6. Python--校园网爬虫记

    查成绩,算分数,每年的综合测评都是个固定的过程,作为软件开发者,这些过程当然可以交给代码去做,通过脚本进行网络请求获取数据,然后直接进行计算得到基础分直接填表就好了,查成绩再手动计算既容易出错也繁琐, ...

  7. PHP后台程序员工作到如今的一点心得

    一个项目的建立,一开始一定要有需求文档,没有需求文档的项目注定会改来改去.还被骂的很惨.要时刻牢记一句话:口说无凭,有文档为证. 第一:开发语言的选择,PHP,当然还有JAVA,.NET你做的项目当然 ...

  8. Apache无法启动原因

    Apache不能启动解决办法 作者的话:遇到这个问题的时候,从网上找了很多资料,结果都是让我这个新手摸不着头绪 还好,在我长时间的查找下,还是找到了一篇文章,解决了我的烦恼,下面是我对这个文章的一些对 ...

  9. 开源的.NET定时任务组件Hangfire解析

    项目慢慢就要开工了,很多园友都在问这个事情,看来大伙对这事很上心啊,事情需要一步步的来,尽量写出一个我们都满意的项目.以前每次在博客前面都会扯淡一下,不过很多人都抱怨这样做不好,加上我这人扯淡起来就停 ...

  10. 说说JAVA之网络编程 - 爬虫

    首先总结一下学习过程中所需要的类: URL类 - openConnection() URLConnection类 - connection() getInputStream() BufferedRea ...