onmousewheel滑鼠滾輪事件繫結的相容性問題
滾輪事件是不同瀏覽器會有一點點區別，一個像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法繫結DomMouseScroll事件，其他的瀏覽器滾輪事件使用mousewheel，下面我來給大傢俱體介紹。
Firefox使用DOMMouseScroll，其他的瀏覽器使用mousewheel。滾動事件觸發時Firefox使用detail屬性捕捉滾輪資訊，其他的瀏覽器使用wheelDelta。不知道為何在該問題上其他廠商和微軟的如此一致。Firefox可以使用addEventListener方法繫結DomMouseScroll事件。
elem.addEventListener('DOMMouseScroll', func, false);IE和其他的主流瀏覽器可以使用傳統的事件繫結模型。但不要使用IE專有的attachEvent方法，其他主流瀏覽器並不識別微軟的這個方法。
<script type="text/javascript">
// <![CDATA[
var mouseWheel = document.getElementById('mouseWheel');
if (mouseWheel.addEventListener) {
mouseWheel.addEventListener('DOMMouseScroll', function(event) {
event.target.innerHTML = event.detail;
event.stopPropagation();
event.preventDefault();
}, false);
}
mouseWheel.onmousewheel = function(event) {
event = event || window.event;
mouseWheel.innerHTML = event.wheelDelta;
event.returnValue = false;
}
// ]]>
</script>
測試之後得到如下的結論。
•Firefox 滑鼠滾輪向上滾動是-3，向下滾動是3
•IE 滑鼠滾輪向上滾動是120，向下滾動是-120
•Safari 滑鼠滾輪向上滾動是360，向下滾動是-360
•Opera 滑鼠滾輪向上滾動是120，向下滾動是-120
•Chrome 滑鼠滾輪向上滾動是120，向下滾動是-120
有人在Safari下做了一些測試：”只是滾動一圈的話，值為+-0.1，如果滾動地稍微快點的話（多滾動幾圈），這個值也會變大。 這是因為Mac OS下有滑鼠滾輪加速功能。滾動一次，瀏覽器滾動1畫素，滾動3次，瀏覽器卻滾動30畫素”。同時他也對Camino（基於Gecko的核心引擎）進行研究：“與Safari相似（+- 0.3 to +-Infinity），雖然使用了與
例1 獲取滑鼠滾輪值，判斷滾動方向
JavaScript獲取滑鼠滾輪值，這裡的值只有“1”和“-1”兩種情況，請選按著中輪滾動，啟用後可以不按，直接滾動。程式根據取值可以判斷出滾輪的滾動方向，是向上滾還是向下滾，在編寫JS遊戲的時候我們要用到本功能。
<html>
<head>
<title>JavaScript判斷滑鼠滾輪滾動方向- www.fengfly.com </title>
<script type="text/javascript">
function handle(delta) {
var s = delta + ": ";
if (delta <0)
s += "您在向下滾……";
else
s += "您在向上滾……";
document.getElementById('delta').innerHTML = s;
}//from www.fengfly.com
function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta)
handle(delta);
}
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
</script>
</head>
<body>
<div id="delta">滾動中輪試試~請選按著中輪滾動，啟用後可以不按，直接滾動。 </div>
<p>shared by http://www.111cn.net</p>
</body>
</html>
其實我對於各個瀏覽器的相容性知道的是少之又少，所瞭解的也不過是event||window.event , e.target||e.srcElement,element,nextSibling||nextElementSibing等等之類的日常需要用到的一些屬性的相容性寫法，關於這些，如果有朋友不知道，我改日抽空會把自己封裝出的一些小方法貼出來，並講解一下，如果是大神就一笑而過就好了。
進入正題，今日在使用自己的洪荒之力搭建自己的部落格（TaoHuaXia.github.io，正在搭建中，截至目前只完成首頁）的時候，偶然發現window.onmousewheel繫結事件的方法並不能在火狐上正常繫結（火狐真是個磨人的小妖精），於是查閱之，主要有以下兩點區別：
1.火狐的滑鼠滾輪事件名為DOMMouseScroll
2.火狐的滑鼠滾輪事件需要使用element.addEventListenr()
其他的主流瀏覽器都可以使用onmousewheel正常繫結，所以我們可以拿出一個相容性的寫法來專門對付火狐：
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',fn,false);
}//火狐
window.onmousewheel=document.onmousewheel=fn;//IE/Opera/Chrome
同時關於各個瀏覽器滑動滾輪時的距離問題，這篇部落格有很細緻的講解，大家可以移步至此
---------------------
作者：ServerWang
來源：CSDN
原文：https://blog.csdn.net/SuperCoooooder/article/details/52403869
版權宣告：本文為博主原創文章，轉載請附上博文連結！