javascript監聽滑鼠滾輪事件淺析_javascript技巧

我們都見過這些效果，用滑鼠滾輪實現某個表單內的數字增加減少操作，或者滾輪控制某個按鈕的左右，上下滾動。這些都是透過js對滑鼠滾輪的事件監聽來實現的。今天這裡介紹的是一點簡單的js對於滑鼠滾輪事件的監聽。

不同瀏覽器不同的事件

首先，不同的瀏覽器有不同的滾輪事件。主要是有兩種，onmousewheel（firefox不支援）和DOMMouseScroll（只有firefox支援），關於這兩個事件這裡不做詳述，想要了解的朋友請移步：滑鼠滾輪(mousewheel)和DOMMouseScroll事件。
另外在操作的過程中需要加入事件監聽，程式碼如下：相容firefox採用addEventListener監聽

複製程式碼

複製程式碼

程式碼如下:

/*註冊事件*/

if(document.addEventListener){document.addEventListener('DOMMouseScroll',scrollFunc,false);

}//W3Cwindow .onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

js回傳數值判斷滾輪上下

判斷滾輪向上或向下在瀏覽器中也要考慮相容性，現在五大瀏覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其餘四類使用wheelDelta；兩者只在取值不一致，代表意義一致，detail與wheelDelta只各取兩個值，detail只取±​​3，wheelDelta只取±120，其中正數表示為向上，負數表示向下。 具體的程式碼如下：複製程式碼

程式碼如下:



程式碼如下:


滾動值:(IE/Opera)
滾動值:(Firefox)

}//W3C windowonmooew>window //IE/Opera/Chrome

透過執行上述程式碼我們可以看到：

複製程式碼

程式碼如下:


在非firefox瀏覽器中，滾輪向上返回的滾動數值是120，向下滾動返回-120
而在firefox瀏覽器中，滾輪向上滾動返回的數值是-3，向下滾動返回3
代碼部分如下，e.wheelDelta是判斷是否為非firefox瀏覽器，e.detail為firefox瀏覽器
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;

}else if(e.detail) {//Firefoxt2.value=e.detail;}