解析javascript中鼠標滾輪事件

更新時間：2015年05月26日 09:40:37 投稿：hebedich

這篇文章主要給大家詳細介紹了javascript中鼠標滾輪事件，圖文并茂，十分的詳細，有需要的小伙伴可以參考下。

所有的現(xiàn)代瀏覽器都支持鼠標滾輪，并且在用戶滾動滾輪時觸發(fā)時間。瀏覽器通常使用鼠標滾輪滾動或縮放文檔，但可以通過取消mousewheel事件來阻止這些默認操作。有一些互用性問題影響滾輪事件，但是編寫跨平臺的代碼依舊可以行。除了Firefox之外的所有瀏覽器都支持“mousewheel”事件，但Firefox使用“DOMMouseScroll”,而3級DOM事件規(guī)范草案建議使用事件名“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有關。

根據(jù)測試，在我的win7系統(tǒng)下，無論IE7, IE10, Opera12,或者是safari5.1，每次往下滾動event.wheelDelta值都是-120.

對于FireFox瀏覽器（Opera瀏覽器也有），判斷鼠標滾動方向的屬性為event.detail, 向下滾動值為3.

需要注意的是，F(xiàn)ireFox瀏覽器的方向判斷的數(shù)值的正負與其他瀏覽器是相反的。FireFox瀏覽器向下滾動是正值，而其他瀏覽器是負值。

var isFirefox = (navigator.userAgent.indexOf("Firefox") !== -1);
if(isFirefox){
  element.addEventListener("DOMMouseScroll",wheelHandler,false);
}
element.onmousewheel = wheelHandler;
//element.onwheel = wheelHandler; //DOM3級wheel事件，經(jīng)過測試IE9還是不支持，但是谷歌和火狐都支持，在谷歌內有wheelDelta在火狐里面有detail
function wheelHandler(event){ event = event || window.event; var delta = event.wheelDelta || detail*-30; }

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

您可能感興趣的文章:

js實現(xiàn)點擊切換卡片功能
這篇文章主要為大家詳細介紹了js實現(xiàn)點擊切換卡片功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
Jquery 切換不同圖片示例代碼
切換不同圖片的方法有很多，在本文為大家介紹下使用jquery是如何做到的
2013-12-12
JS+CSS實現(xiàn)精美的二級導航效果代碼
這篇文章主要介紹了JS+CSS實現(xiàn)精美的二級導航效果代碼,涉及JavaScript基于鼠標事件動態(tài)變換元素樣式的技巧,非常簡單實用,需要的朋友可以參考下
2015-09-09
微信小程序完美解決scroll-view高度自適應問題的方法
這篇文章主要介紹了微信小程序完美解決scroll-view高度自適應問題的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-08-08
document.compatMode介紹
對于document.compatMode，很多朋友可能都根我一樣很少接觸，知道他的存在卻不清楚他的用途。
2009-05-05
namespace.js Javascript的命名空間庫
命名空間的好處已經(jīng)耳熟能詳，但是JS中并沒有原生態(tài)支持命名空間，這個庫就是為js提供命名空間的功能。
2011-10-10
layer擴展打開/關閉動畫的方法
今天小編就為大家分享一篇layer擴展打開/關閉動畫的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
javascript常用的方法分享
本文給大家分享了幾個javascript中常用的方法，十分的實用，也很簡單，有需要的小伙伴可以參考下。
2015-07-07
用javascript實現(xiàn)模擬火焰
用javascript實現(xiàn)模擬火焰...
2007-10-10
Three.js入門之hello world以及如何繪制線
這篇文章主要給大家介紹了關于Three.js入門之hello world以及如何繪制線的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2017-09-09