JS滑鼠滾輪事件解析

標籤：

一、不同瀏覽器的滑鼠滾輪事件

首先，不同的瀏覽器有不同的滾輪事件。主要是有兩種，onmousewheel（IE/Opera/Chrome支援，firefox不支援）和DOMMouseScroll（只有firefox支援）

另外在操作的過程中需要添加事件監聽，相容性寫法

代碼如下：

/*註冊事件*/if(document.addEventListener){    document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false); // W3C}window.onmousewheel=document.onmousewheel=scrollFunc;             // IE/Opera/Chrome

 二、通過js事件event對象的返回數值判斷滾輪上下

判斷滾輪向上或向下在瀏覽器中也要考慮相容性，現在五大瀏覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其餘四類使用wheelDelta；

兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個值，detail只取±3，wheelDelta只取±120，其中正數表示為向上，負數表示向下。

代碼如下：

<label for="wheelDelta">滾動值:</label>(IE/Opera)<input type="text" id="wheelDelta"/><label for="detail">滾動值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript"> 　　var scrollFunc = function(e){     　　e = e || window.event;     　　var t1 = document.getElementById("wheelDelta");     　　var t2 = document.getElementById("detail");     　　if( e.wheelDelta ){  // IE/Opera/Chrome         　　t1.value = e.wheelDelta;    　　 }else if( e.detail ){ // Firefox         　　t2.value = e.detail;     　　} 　　} 　　/*註冊事件*/ 　　if(document.addEventListener){     　　document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false); // W3C 　　}　　window.onmousewheel=document.onmousewheel=scrollFunc;             // IE/Opera/Chrome </script>

效果如下：

通過運行上述代碼我們可以看到：

在非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){ // Firefox    t2.value=e.detail;}

 

JS滑鼠滾輪事件解析