鼠標滾動：mousewheel事件在Firefox採用DOMMouseScroll事件的統一處理

這是一個小事件，但當下的WEB應用交互很是豐富，判斷鼠標的滾動來執行相應的操做是比較常見的。我用Chrome/IE/Firefox/Opera 4種瀏覽器作測試，發現只有firefox的處理方法有很大的不一樣，下面細說一下這個狀況：

第一、事件的名稱不一樣

其它瀏覽器均採用mousewheel作爲事件的名稱，而Firefox採用DOMMouseScroll作爲事件的名稱，爲了兼容，那咱們就得綁定兩次事件，以下：

1 document.addEventListener('mousewheel', handlerMouseWheel);
2 document.addEventListener('DOMMouseScroll', handlerMouseWheel);

 

第二、判斷滾輪的方向和值均不一樣

其它瀏覽器均是向上滾動爲正值(+120)、向下滾動爲負值(-120)。而Firefox則是向上滾動爲負值(-5)，向下滾動爲正值(+5)。

 

第三、包裝event對象不一樣

Firefox對滾輪滾動的值保存在event對象中的detail屬性裏，而其它瀏覽器保存在event對象中的wheelDelta屬性。

 

爲了方便統一處理，咱們還得編寫一個函數，讓firefox與其它瀏覽器的取值與方向相同，代碼以下：

1 var getWheelDelta = function(event) {
2     return event.wheelDelta || (-event.detail * 24);
3 }

上面採用-event.detail來保持方向一致，放大24倍來保持值一致。（保持一次並不是必需的，但有些狀況下保持一致有利於處理）