js中判斷鼠標滾輪方向的方法

  前  言

LiuDaP

　　　最近無聊，在做自己的個人站，其中用到了一個關於鼠標滾輪方向判斷的方法，今天閑來無聊，就給大家介紹一下吧！！！！

 　　在介紹鼠標事件案例前，讓我們先稍微了解一下js中的event對象

一、JS中的Event對象

 　　Event對象：它代表的是事件的狀態，例如可以表示鼠標的位置、鼠標按鈕的狀態、鍵盤按鍵的狀態等等。

　　>>>事件通常與函數結合使用，函數不會在事件發生前被執行！

 

二、JS中如何判斷鼠標滾輪方向

　　判斷鼠標滾輪的方向，有着兩個派別：一是谷歌、IE派別（這次IE沒有搞特殊）；二是火狐派別

　　>>>在谷歌、IE派別中，給我們提供了onmousewheel方法，該方法給我們提過了一個wheelDelta屬性，該屬性的返回值：正值與負值，其中正值表示滾輪向上滾動；負值表示滾輪向下滾動。

　　>>>而在火狐中，給我們提供了DOMMouseScroll方法，該方法給我們提供了一個detail屬性，該屬性的返回值：正值與負值，其中正值表示滾輪向下滾動；負值表示滾輪向上滾動。

　　>>>要注意的一點是：wheelDelta屬性和detail屬性的返回值都是正值與負值，但是兩者表示滾輪的方向正好相反。。。

 1 var scrollMouse=function(e){  
 2         e=e || window.event;  
 3         if(e.wheelDelta){            //判斷瀏覽器IE，谷歌滑輪事件               
 4                 if(e.wheelDelta>0){  //當滑輪向上滾動時  
 5             alert("滑輪向上滾動");
 6             }  
 7         if(e.wheelDelta<0){          //當滑輪向下滾動時  
 8                 alert("滑輪向下滾動");
 9         } 
10     }else if(e.detail){             //Firefox滑輪事件  
11             if(e.detail>0){         //當滑輪向下滾動時  
12                     alert("滑輪向下滾動");  
13         }  
14         if(e.detail<0){            //當滑輪向上滾動時  
15                 alert("滑輪向上滾動");  
16         }  
17         }  
18 }  
19 //給頁面綁定滑輪滾動事件  
20 if(document.addEventListener){//firefox  
21     document.addEventListener("DOMMouseScroll", scrollFunc, false);  
22 }  
23 //滾動滑輪觸發scrollFunc方法  //ie 谷歌  
24 window.onmousewheel=scrollMouse;    

 

編者按

　　這個周末由於事情太多了，就給大家分享到這里吧，希望這一點點小知識能給大家帶來一點點的幫助。。