这是一个小事件,但当下的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. UITableView多层展开与收起

    规则要求: tableview 有多层,类似于xcode文件目录的层级关系,每一个最开始展示的层姑且称之为根目录吧,并且,每个根目录下的层数不定. 与文件目录类似,每个目录下可以有不同层级的目录同时展 ...

  2. Foundation Kit介绍

    Cocoa实际上是由许多个不同的框架组成的,其中最常用于桌面端(OS X)应用程序的是Foundation和Application Kit.它包含了所有的用户界面对象和高级类.如果打算开发ios平台上 ...

  3. Struts2之访问路径

    上一篇已经和大家分享了关于Struts2命名空间和Action的三种创建方式,本篇我们接着命名空间的内容,来一起探讨一下关于Struts2的访问路径问题,何为访问路径,就是指当我们在浏览器输入地址,点 ...

  4. 用smarty模板做数据实现修改、分页等功能

    先来看怎么把数据库的列表全都显示出来 还是要先建一个php文件,还有html文件,都存到相应的目录下 php文件中 <?php include("../init.inc.php&quo ...

  5. 用VUEJS做一个猫眼电影web app

    之前一直在学习原生js,可是发现原生js虽然很好,但是想实现一个稍微复杂一点的项目都很麻烦.直到遇见了vue.js,发现vue是真的很好用,而且很简洁,利用组件化开发能够快速做出项目,所以为了学习vu ...

  6. Java设计模式之《职责链模式》及应用场景

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6530089.html 职责链模式(称责任链模式)将请求的处理对象像一条长链一般组合起来,形 ...

  7. java算法 蓝桥杯(题+答案) 方格填数

    6.方格填数  (结果填空) 如下的10个格子 (如果显示有问题,也可以参看[图1.jpg]) 填入0~9的数字.要求:连续的两个数字不能相邻.(左右.上下.对角都算相邻) 一共有多少种可能的填数方案 ...

  8. UVa 1588 换抵挡装置

    前言 题目 大意是说,两个槽能够插在一起,并保证每一列的高度不高于3,保证最短长度. 思路 思路很简单,取短字符串遍历长字符串的每一个位置,纪录下位置,并取最短即可. 实现 //习题3-11 换抵挡装 ...

  9. KoaHub平台基于Node.js开发的Koa EJS渲染插件代码信息详情

    koa-ejs ejs render middleware for koa koa-ejs Koa ejs view render middleware. support all feature of ...

  10. Android中的几种多线程实现

    有以下几种方式: 1)Activity.runOnUiThread(Runnable) 2)View.post(Runnable) ;View.postDelay(Runnable , long) 3 ...