js滑鼠滾輪事件相容

ie6.0首先實現了滑鼠的滾輪事件，其良好的互動效果得到認可，隨後opera、chrome、safari等主流瀏覽器都實現了該效果，不過存在著很大的相容問題。

大多數瀏覽器支援mousewheel事件操作，它可以在任何元素上觸發，最終冒泡到document或window物件；而在firefox中，支援的是另外一種事件——

dommousescroll，其中最為特殊的是它必須用addeventlistener方法實現，故一般進行如下處理

1

//設觸發的函式為fn2if
(odiv.addeventlistener) 
5 odiv.onmousewheel = fn;

mousewheel觸發事件會有乙個特殊的事件屬性——wheeldelta，當使用者向前滾動是，它的值是120的倍數，向後滾動時，它的值是-120的倍數。不過在

opera9.5之前的版本中，正負號是顛倒的；在firefox中，並沒有wheeldelta屬性，而是detail屬性，與wheeldelta相比較，它不僅正負號顛倒，其值是3的倍數。為

了相容正負號顛倒的問題，可以採取設定布林值的解決方法。

1

//這是乙個通過滑鼠滾輪改變div高度的函式
2function
fn(ev) else
1011
if( b ) else
16 }

在該函式中，向上滾動b為true，向下滾動b為false。

然而，如果頁面有滾動條的話，在div上滾動滾輪的時候，會觸發瀏覽器的預設事件。通常，我們用return false處理，可在addeventlistener中，需要使用

preventdefault函式來消除瀏覽器的預設事件。

1

//在上述fn函式的末尾加消除瀏覽器預設事件的操作2if
( ev.preventdefault ) 56
return
false;

以上可以解決滑鼠滾輪事件帶來的大部分相容問題。

JS滑鼠滾輪事件詳解

文章目錄 相容性寫法，該函式也是網上別人寫的，不過找不到出處了，蠻好的，所有我也沒有必要修改了 判斷滑鼠滾輪滾動方向 if window.addeventlistener ff,火狐瀏覽器會識別該方法 window.addeventlistener dommousescroll wheel,fals...

JS滑鼠滾輪事件詳解

相容性寫法，該函式也是網上別人寫的，不過找不到出處了，蠻好的，所有我也沒有必要修改了 判斷滑鼠滾輪滾動方向 if window.addeventlistener ff,火狐瀏覽器會識別該方法 window.addeventlistener dommousescroll wheel,false win...

滑鼠滾輪事件

新增事件 有相容性 註冊事件 if document.addeventlistener window.onmousewheel document.onmousewheel scrollfunc ie opera chrome detail與wheeldelta 判斷滾輪向上或向下在瀏覽器中也有相容性...