首頁 >web前端 >js教程 >解析javascript中滑鼠滾輪事件_javascript技巧

解析javascript中滑鼠滾輪事件_javascript技巧

WBOY
WBOY原創
2016-05-16 15:57:521364瀏覽

所有的現代瀏覽器都支援滑鼠滾輪,並且在使用者滾動滾輪時觸發時間。瀏覽器通常使用滑鼠滾輪滾動或縮放文檔,但可以透過取消mousewheel事件來阻止這些預設操作。有一些互用性問題影響滾輪事件,但是寫跨平台的程式碼依舊可以行。除了Firefox之外的所有瀏覽器都支援「mousewheel」事件,但Firefox使用「DOMMouseScroll」,而3級DOM事件規範草案建議使用事件名稱「wheel」取代「mousewheel」。

document.body.onmousewheel = function(event){
  event = event || window.event;
  console.dir(event);
}

Firefox不支援mousewheel

document.body.addEventListener("DOMMouseScroll",function(event){
  console.dir(event);
})

以下滾輪向下滾動是chrome和IE9下面控制台輸出

以下是滾輪向下滾動Firefox下面控制台輸出

從上方輸出得出,可以使用非標準的DOMMouseScroll事件取代mousewheel,使用事件物件的detail屬性取代wheelDetal。但是,detail屬性值的縮放比率和正負符號不同於wheelDetal,detail值乘以-40和wheelDetal值相等。

在除了FireFox之外的瀏覽器下,滾動的上下滾動與否是下面這個wheelDelta有關。


根據測試,在我的win7系統下,無論IE7, IE10, Opera12,或是safari5.1,每次往下滾動event.wheelDelta值都是-120.

對於FireFox瀏覽器(Opera瀏覽器也有),判斷滑鼠滾動方向的屬性為event.detail, 向下捲動值為3.

要注意的是,FireFox瀏覽器的方向判斷的數值的正負與其他瀏覽器是相反的。 FireFox瀏覽器向下捲動是正值,而其他瀏覽器則是負值。

var isFirefox = (navigator.userAgent.indexOf("Firefox") !== -1);
if(isFirefox){
  element.addEventListener("DOMMouseScroll",wheelHandler,false);
}
element.onmousewheel = wheelHandler;
//element.onwheel = wheelHandler; //DOM3级wheel事件,经过测试IE9还是不支持,但是谷歌和火狐都支持,在谷歌内有wheelDelta在火狐里面有detail
function wheelHandler(event){ event = event || window.event; var delta = event.wheelDelta || detail*-30; }

以上所述就是本文的全部內容了,希望大家能夠喜歡。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn