當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

[JS] - onmusewheel事件(兼容IE,FF,opera,safari,chrome)

發布時間：2025/4/16 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 [JS] - onmusewheel事件(兼容IE,FF,opera,safari,chrome) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

來源：http://www.denisdeng.com/?p=685

相信用戶在瀏覽Google?Map?時，都注意到向上或向下滾動鼠標可以使地圖放大或縮小。其實，對于鼠標滾動我們并不陌生。但要給一個元素綁定鼠標滾動事件，我們有必要對該事件有一個詳盡的了解。

瀏覽器對該事件支持情況如何？IE6,?Opera9+,?Safari2+以及Firefox1+均支持“onmousewheel”事件，在FF?3.x中，與之相當的是“DOMMouseScroll”事件。“onmousewheel”作為事件名，不為其識別。所以，為了保證能在每個瀏覽器中都能運行，就需要針對不同的瀏覽器來綁定不同的事件。

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel"//FF doesn't recognize mousewheel as of FF3.x if(document.attachEvent) //if IE (and Opera depending on user setting) document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')}) else if(document.addEventListener) //WC3 browsers document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false)

上面的代碼給document綁定了mousewheel事件，并能在所有瀏覽器中運行。但是，鼠標每向上或向下移動一次，滾動了多少？當該事件觸發時，在non-FF瀏覽器中，記錄其距離的是“wheelDelta”，它返回的總是120的倍數（120表明mouse向上滾動，－120表明鼠標向下滾動）。在FF中，記錄其滾動距離的是“detail”屬性，它返回的是3的倍數（3表明mouse向下滾動，－3表明mouse向上滾動）。

需要注意的是，Opera?響應“onmousewheel”事件時，它同時擁有“wheelDelta”和“detail”屬性。其“detail”屬性返回的值與FF中相同。因此，對Opera?應該用“detail”屬性來mouse滾動的距離。在觸發滾動事件時，我希望得到整數1或－1。通過上面的分析，我們可以很輕松的得到我們想要的值，對于“wheelDelta”，只需要除以120，對于“detail”,將其除以3即可。

function displayDelta(e){ var evt =window.event ||e; var delta =evt.detail ?-evt.detail /3: evt.wheelDelta /120; return delta ; }

有了上面的分析，我們可以構建自己的函數為一個對象綁定mousewheel事件。即：

function wheel(obj, fn ,useCapture){ var mousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel"//FF doesn't recognize mousewheel as of FF3.x if(obj.attachEvent) //if IE (and Opera depending on user setting) obj.attachEvent("on"+mousewheelevt, handler, useCapture); elseif(obj.addEventListener) //WC3 browsers obj.addEventListener(mousewheelevt, handler, useCapture);function handler(event) { var delta =0; var event =window.event ||event ; var delta =event.detail ?-event.detail/3 : event.wheelDelta/120; if(event.preventDefault) event.preventDefault(); event.returnValue =false; return fn.apply(obj, [event, delta]); } }

?其他一些onmousewheel的用法

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滾輪取值效果 -http://www.jb51.net/</title> </head> <body> <p><label for="wheelDelta">滾動值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p> <p><label for="detail">滾動值:(Firefox)</label><input type="text" id="detail" /></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 </script> </body> </html>

注：“window.onmousewheel=document.onmousewheel”在chrome，opera，safari中會觸發兩次事件，可檢測瀏覽器來區分。ie下僅支持“document.onmousewheel”事件。

IE/Opera屬于同一類型，使用attachEvent即可添加滾輪事件。

/*IE注冊事件*/?
if(document.attachEvent){?
document.attachEvent('onmousewheel',scrollFunc);?
}

Firefox使用addEventListener添加滾輪事件

/*Firefox注冊事件*/?
if(document.addEventListener){?
document.addEventListener('DOMMouseScroll',scrollFunc,false);?
}

Safari與Chrome屬于同一類型，可使用HTML DOM方式添加事件?
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome?
其中除Firefox外其余均可使用HTML DOM方式添加事件，因此添加事件使用以下方式

/*注冊事件*/?
if(document.addEventListener){?
document.addEventListener('DOMMouseScroll',scrollFunc,false);?
}//W3C?
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

也可以這樣

if(document.attachEvent){document.attachEvent("on"+mousewheel, scrollFunc)}//ie
if(document.addEventListener){document.addEventListener(mousewheel, scrollFunc, false)}//Opera/Chrome/safari

判斷滾輪向上或向下在瀏覽器中也要考慮兼容性，現在五大瀏覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個值，detail只取±3，wheelDelta只取±120，其中正數表示為向上，負數表示向下。

var scrollFunc=function(e){?
e=e || window.event;
if(e.wheelDelta){alert(e.wheelDelta);//IE/Opera/Chrome?±120

}
else if(e.detail){alert(e.detail)//Firefox ±3?

}

轉載于:https://www.cnblogs.com/huangyong8585/archive/2012/11/14/2770114.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的[JS] - onmusewheel事件(兼容IE,FF,opera,safari,chrome)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。