jquery擴展鼠標mousewheel事件

 　　最近項目中要有個鼠標在圖片上滾動實現圖片放大和縮小的得到功能，隱約的記得好像記得有個 mousewheel 事件，可以實現需求，於是乎，開始在網上查找這一方法，但是，出乎意料的結果，各瀏覽器對此方法有着不同的實現方式，當時我就呵呵啦...
這下麻煩啦，於是又在網上查了些許資料，基本上都是大同小異，大概的思路都是根據firefox的DOMMouseScroll事件 和 其它瀏覽器的onmousewheel事件來實現 自定義mousewheel事件，其實前輩們留下來的 基本上也可以拿來用啦，可是鬼使神差的不知怎么的這次就非要叫個針，非要自己實現一下試試，而且本人比較擅長 jquery, 所以有了想用 $.fn.extend 擴展一個 mousewheel事件的想法，所以就開啟了下邊的自定義 jquery 擴展 mousewheel事件之旅。

　　其實呢，現在有個比較成熟的 jquery.mousewheel.js 插件，發現好多用到鼠標滾輪輪動效果的網站都用了這個插件，兼容性也挺高的，所以如果網站建設對加載文件數量不在意的話完全可以使用此插件：

　　下載地址：

　　　　https://github.com/jquery/jquery-mousewheel
　　　　http://plugins.jquery.com/mousewheel/
　　　　原諒我網速不好 以上兩個地址 我都沒訪問到， 吼吼....

　　　　http://www.jq22.com/jquery-info805（最后再此站點 下載了個應用 jquery.mousewheel.js 的 Demo，其中有 我們需要的插件哦：））

　　細讀了兩邊jquery.mousewheel.js源碼，了解到，它是用 $.event.special 從 HTMLElement層級 進行的添加，可是這並不是我想要的，不能忘了自己最初的目的（我只是想要一個棗嘗嘗，並沒有想要一顆棗樹...）

　　

好了不說了,開始正題,原諒我一說就容易剎不住車....

　　首先，計划個思路，分個 1，2, 3,4..... 步..

　　step1: 遍讀網絡博客了解各瀏覽器所支持的 鼠標滾動 事件，以便了解兼容性的不同

　　漲姿勢：

　　　　　　主要區別在於 firefox 和 其它瀏覽器的區別：firefox支持DOMMouseScroll, 而 其它瀏覽器支持mousewheel。

　　　　　　可是看了 jquery.mousewheel.js源碼后，發現 貌似還有Browser 或是 同種Browser不同版本號, 支持的方式也是不一樣，所以有又有了 wheel 和 MozMousePixelScroll（這個一看就是firefox支持的） 這兩個事件，具體沒有研究，如果對這方面有造詣的同仁們，歡迎留言，討論交流。

　　思路：

　　　　　　1.把各瀏覽器對mousewheel支持的事件,組成數組，以便之后的事件監聽

　　　　　　2.將不同的mousewheel事件，進行事件監聽（根據漲姿勢 階段了解到，主要是要處理firefox下的事件監聽)

　　所以有了下邊的這段，參考 jquery.mousewheel.js 插件，並有些小改動的代碼，如下：　　

 

    $.fn.extend({  
        mousewheel: function(){
                var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?        //documentMode屬性返回瀏覽器渲染當前文檔所用的模式
                        ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
                   var el = this[0];                                                            //this[0];  jquery對象 轉 JS對象(因addEventListener是JS對象的監聽事件)
                if( el.addEventListener ){    
                   for( var i = toBind.length; i; ){
                       el.addEventListener(toBind[--i],handleFun,false);
                   }
                }
                else {
                    el.onmousewheel = handleFun;
                }
    });

 

 

　　

　　step2: 對監聽事件 中的事件處理函數進行設計，目的：得到 滾輪 的滑動方向（這點很重要哦，每一步都要明確知道我們要干什么）

　　漲姿勢：

　　　　　　經過對defferent browers 測試，得到可以用來判斷 滾輪滾動方向的屬性，經測試 主要在 wheelDelta、wheelDeltaY 和 deltaY 三個屬性上面有些文章（在step1階段了解到還和detail屬性有關，然而在自測階段，發現 然並卵... detail=0 沒有變過，可能是我用測瀏覽器版本問題，如果對這方面有造詣的同仁們，歡迎留言，討論交流）。

　　　　　　測試結果：

　　　　　　

　　思路： 

　　　　　　1.根據測試得到的結果，用滑動鼠標的滾輪以上各個屬性的值的符號來確定 滾輪的滑動方向

　　　　　2.確定目標：向上滾動--> 1, 向下滾動--> -1

　　思路已有，start coding.....

 

                //deal with the mousewheel
                function handleFun(e){
                   var driect = 0, delta=0;    //driect:滾動方向  delta:各瀏覽器監聽滾動事件的屬性值
                   var e = e || window.event;
                   if ( e.wheelDelta ){ delta = e.wheelDelta }
                   else if ( e.deltaY     ){ delta = e.deltaY * -1 }
                   else if( e.wheelDeltaY ) { delta = e.wheelDeltaY }
                   else { 
                           console.log('get delta,have somethings wrong...');
                   }
                   delta==0 ? console.log('get delta,have somethings wrong...') :
                   delta>0     ? driect=1 : driect=-1;    

                   typeof fn==='function' ? fn( $(el) ,driect ) : '';
                }

 

綜合step1 和 step2, 完整寫法：

        $.fn.extend({
            mousewheel: function( fn ){
                //judge the brower's mousewheel event, bind the event to element 
                var toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
                        ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
                   var el = this[0];            //this[0];  jquery對象 轉 JS對象(因addEventListener是JS對象的監聽事件)
                if( el.addEventListener ){    
                   for( var i = toBind.length; i; ){
                       el.addEventListener(toBind[--i],handleFun,false);
                   }
                }
                else {
                    el.onmousewheel = handleFun;
                }

                //deal with the mousewheel
                function handleFun(e){
                   var driect = 0, delta=0;    //driect:滾動方向  delta:各瀏覽器監聽滾動事件的屬性值
                   var e = e || window.event;
                   if ( e.wheelDelta ){ delta = e.wheelDelta }
                   else if ( e.deltaY     ){ delta = e.deltaY * -1 }
                   else if( e.wheelDeltaY ) { delta = e.wheelDeltaY }
                   else { 
                           console.log('get delta,have somethings wrong...');
                   }
                   delta==0 ? console.log('get delta,have somethings wrong...') :
                   delta>0     ? driect=1 : driect=-1;    

                   typeof fn==='function' ? fn( $(el) ,driect ) : '';
                }
            }

        });

應用：

 

$('div').mousewheel(function(dir){
    console.log( dir );
});

 

結果：

 

ok! 成功！！ 至於開始提到的 滑動鼠標，圖片的放大縮小功能實現在 《自定義mousewheel事件，實現圖片放大縮小功能實現》中是講述。