JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

Javascript对鼠标滚轮事件的处理

W3C并没有对鼠标滚轮事件进行规范,各浏览器厂商封装了不同的实现方法,事件属性也不一样,号称最标准的FireFox,用了一个私有实现DOMMouseScroll。不过,其他浏览器都是用onmousewheel实现,所以做兼容处理的难度也不大。
浏览器 实现方法 事件属性 向上滚动 向下滚动
FireFox DOMMouseScroll detail -3 3
非FireFox onmousewheel wheelDelta 120 -120

所谓事件属性,就是滚轮滚动时某个特定变量的变化。该变量不需要用户定义,是作为事件的属性出现的。
  • 对于FireFox,这个变量是detail:滚轮向上滚动,detail=-3;向下滚动,detail=3。
  • 对于非FireFox,这个变量是wheelDelta:滚轮向上滚动,wheelDelta=120;向下滚动,wheelDelta=-120。

另外,还有一点需要注意。
  • 在FireFox下,DOMMouseScroll必须通过addEventListener来绑定,如:
        element.addEventListener("DOMMouseScroll",fun,false)
  • 在非FireFox下,就没有限制了,除了上述方法,还可用下边的代码:
        element.onmousewheel=function(){}

笔者最后总结了一段兼容代码,给大家使用。
  • 对于实现方法的兼容:
    /**
    * 注册滚轮事件函数
    * @param ele  注册的事件对象
    * @param fun  注册事件函数
    */ 
    function mouseWheel(ele,fun)
    {
        (/firefox/i).test(navigator.userAgent)?ele.addEventListener("DOMMouseScroll",fun,false):ele.onmousewheel=fun;
    }
  • 对于事件属性的兼容: