js中鼠标滚轮事件在不同系统下的差异

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-07-21 08:53:09　-　阅:　-　评:0　-　积分:0

前几日因一时之需百度了下js中鼠标滚轮事件，找到了串代码。有码就要测试这是洒家的一贯作风，结果是大有所获，代码果然有问题！源码如下：

<!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=utf-8" />
<title>js中鼠标滚轮事件在不同系统下的差异--艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="js中鼠标滚轮事件,不同系统下滚轮取值不同,wheelDelta,detail,DOMMouseScroll">
</head>
<body>
<p><label for="wheelDelta"> 滚动值:</label><input type="text" id="wheelDelta" />(/IE/Opera/Chrome/Safari )</p>
<p><label for="detail"> 滚动值:</label><input type="text" id="detail" />(Firefox)</p>
<script type="text/javascript">
var oTxt=document.getElementById("txt");
/***********************
* 函数：判断滚轮滚动方向
* 作者：walkingp
* 参数：event
* 返回：滚轮方向 1：向上 -1：向下
*************************/
var scrollFunc=function(e){
var direct=0;
e=e || window.event;
var t1=document.getElementById("wheelDelta");
var t2=document.getElementById("detail");
if(e.wheelDelta){/*IE/Opera/Chrome*/
t1.value=e.wheelDelta;
}else if(e.detail){/*Firefox*/
t2.value=e.detail;
}
ScrollText(direct);
}
/*注册事件*/
 if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}/*W3C*/
window.onmousewheel=document.onmousewheel=scrollFunc;/*IE/Opera/Chrome/Safari*/
</script>
</body>
</html>

源码中提供了“IE/Opera/Chrome/Safari”与“Firefox”这五种浏览器的写法，前四者都可以使用“wheelDelta”来取值，后者需要使用“detail”来取值。鼠标滚轮分上和下，这里向上是正数，向下是负数火狐相反。经测试发现：XP系统下，前四者的值为：±120，后者的值为：±3。而在win7系统下，各种坑爹啊！！！

首先说Chrome,值变成了±30；唯一不变的就是向上为正向下为负；IE也是±30；初步得出结论：win7下，前四者的值已经不再是±120了而是±30。再来说Firefox,尼玛坑死爹啊！竟然出现了4个值！±1；±2。附截图一张：

不知道在win8中和其它系统中会是什么样的取值。唉，说多了都是泪啊！小伙伴们在使用时需谨慎。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2014-07-21/176.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！