鼠標滾輪事件介紹


簡介

  IE6實現了鼠標滾輪事件mousewheel,這個事件包含了一個鼠標事件所沒有的屬性,wheelDelta,這

個屬性值始終是120的倍數,而且向上滑動一單位,wheelDelta值為120,向下為-120.隨后Chrome,Opera,

Safari等也都實現了該事件。Opera10之前的版本對wheelDelta值的符號處理錯誤,需要修改。但是Firefox沒

有該事件,而是用DOMMouseScroll。這個事件只有Firefox支持,所以可以單獨針對Firefox做兼容。

  另外,HTML5為了兼容這兩個事件,另外規定了一個標准版本wheel事件,比較新的瀏覽器基本實現了該事件。

chrome31+,Firefox 17+,IE9+,Safari 7.0.5以及新版使用webkit內核的Opera,使用Carakan內核的Opera

並不支持該事件。wheel事件有deltaX、deltaY和deltaZ屬性,默認為100.

  綜上,目前wheel事件的兼容性其實並不理想,mousewheel的兼容性最佳,適用於除Firefox外的所有瀏覽器,對於

Firefox則單獨做兼容處理。

  

 1 addEvent = function(type,callback,useCapture){
 2     if(window.addEventListener){
 3         this.addEventListener(type,callback,!!useCapture);
 4     }else if(window.attachEvent){
 5         this.attachEvent('on'+type,callback);
 6     }
 7     return callback;
 8 }
 9 wheel = function(el,callback){
10     var type = 'mousewheel';
11     try{
12         document.createEvent('MouseScrollEvents');
13         type = 'DOMMouseScroll';
14     }catch(e){}
15     el.addEvent = addEvent;
16     el.addEvent(type,function(e){
17         e = e || window.event;
18         var wheelDelta,delta;
19         if('wheelDelta' in e){
20             wheelDelta = e.wheelDelta;  // 正數向上滾動
21             if(window.opera && window.opera.version() < 10){
22                 e.delta = parseInt(-wheelDelta) / 120;  // safari 下的wheeldelta為浮點數
23             }
24             e.delta = parseInt(wheelDelta) / 120;
25         }else if('detail' in e){
26             e.wheelDelta = -e.detail * 40; //修復firefox下沒有wheelDelta的bug,detail為+-3
27             e.delta = e.wheelDelta / 120;
28         }
29         callback.call(el,e);
30         //阻止向上冒泡
31         e.stopPropagation && e.stopPropagation();
32         if("stopBubble" in e) e.stopBubble = true;
33         return false;
34     },false);
35 };

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM