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;
    }
  • 对于事件属性的兼容:
    /**
    *  对滚轮事件属性的兼容处理,不管何种浏览器,最后统一为:鼠标轮向上滚动detail=-3,向下滚动detail=3
    */ 
    function fun(e)
    {
        var e=e||event;
        var detail=e.detail||parseInt(-e.wheelDelta/40);
        /* 添加代码 */
    }
实例:鼠标在图片上滚动,图片放大或缩小。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>效果:鼠标在图片上滚动,图片放大或缩小</title>
</head>
<body>
<img src="/uploads/allimg/121023/1-1210231013513W.jpg" />
<br /><br /><br /><br />
<img src="/uploads/allimg/121023/1-12102321502QO.png" />
<script language="JavaScript" type="text/javascript">
function fun(e)
{
    var e=e||event;
    var detail=e.detail||parseInt(-e.wheelDelta/40);
this.setAttribute("height",this.offsetHeight+4*detail);
}

function mouseWheel(ele,fun)
{
    (/firefox/i).test(navigator.userAgent)?ele.addEventListener("DOMMouseScroll",fun,false):ele.onmousewheel=fun;
}

for(var imgs=document.getElementsByTagName("img"),len=imgs.length,i=0;i<len;i++)
{
mouseWheel(imgs[i],fun)
}
</script>
</body>
</html>