【Js】鼠標滾輪事件

原文地址：http://www.joy-studio.com/frontend-develop/cross-browser-mousewheel-and-demo.html

做東西用到：加上自己的理解o(∩_∩)o 哈哈。

瀏覽器差異：firefox滾輪事件是DOMMouseScroll，其他瀏覽器使用的是mousewheel

firefox事件的event對象使用detail值表示滾輪反向，（-3）表示向上，（3）表示向下。

其他瀏覽器使用wheelDelta值表示表示滾輪方向，（120）表示向上， （-120）表示向下。

監聽事件，刪除監聽事件：IE678使用attachEvent/detachEvent, 其他瀏覽器使用addEventListener/removeEventListener。

fixedEvent：判斷滾輪方向

fixedFn：滾動滾輪取消滾輪的默認滾動網頁行為

el.wheelHash：把fixedFn存放到對象的wheelHash屬性

var mousewheel = (function(){
    var types =['DOMMouseScroll','mousewheel'];

    fixedEvent = function(e){
        e.wheel = (e.wheelDelta? e.wheelDelta : -e.detail) > 0? 1 : -1;// 通過事件判斷鼠標滾輪反向，1是向上，-1是向下
        e.wheelDir = e.wheel > 0? 'up' : 'down';    //這個只是描述 e.wheel的值和滾輪方向的關系
        return e;
    };

    return{//返回mousewheel的方法
        on: function(el, fn, preventDefault){ //mousewheel對象的on方法， el觸發mousewheel事件對象，fn觸發后執行函數，preventDefault是否阻止默認行為：滾輪的網頁滾動效果
            if(typeof preventDefault != 'boolean'){ //如果傳入的實參preventDefault不是布爾值 
                preventDefault = true; //初始化為true
            }    

            var fixedFn = function(e){ //阻止默認行為函數
                e = fixedEvent(e || window.event); // 兼容寫法， 返回的e用來判斷滾輪方向
                if(preventDefault){ // 如果需要阻止默認行為
                    if(e.preventDefault){    //firefox
                        e.preventDefault();
                    }
                    else{
                        e.returnValue = false; //ie
                    }
                };

                fn.call(el, e); //el事件對象調用fn函數，參數為e; 注意fn中使用e.wheel去判斷鼠標滾輪事件
            },
            wheelHash = el.wheelHash; //把包含fixedFn函數的 el.wheelHash屬性 賦值給 wheelHash

            if(!wheelHash){  //判斷函數是否存在 wheelHash 對象
                wheelHsah = {};
                wheelHash[fn] = fixedFn;  //wheelHash對象的屬性fn為阻止默認行為函數
                el.wheelHash = wheelHash;  //把wheelHash對象賦值給el的wheelHash屬性  wheelHash[fn] == el.wheelHash[fn]
            }else{
                if(wheelHash[fn]) return; //如果存在 wheelHash 且 wheelHash中有 fixedFn 那么返回
                wheelHash[fn] = fixedFn;  //如果沒有， 就把fixedFn賦值給wheelHash.fn
            };

            if(document.addEventListener){  //firefox
                var i = types.length;  
                while(i--){  //循環滾輪事件 數組
                    el.addEventListener(types[i], fixedFn, false);    //firefox el監聽滾輪事件，執行取消默認行為
                }
            }
            else{  //ie
                el.attachEvent('onmousewheel', fixedFn);     // ie 監聽事件， 處理函數fixedFn
            }
        },  
    //mousewheel中的on方法作用: 讓元素監聽事件，且處理是否執行默認行為。並且保存事件的阻止默認行為函數fixedFn到對象el.wheelHash屬性中，

        un: function(el, fn){
            if(!el.wheelHash) return;  //如果對象不存在wheelHash, 直接跳出(沒效果了)；
            var wheelHash = el.wheelHash;
            if(document.removeEventListener){  //firefox
                var i = types.length;
                while(i--){
                    el.removeEventListener(types[i],wheelHsah[fn], false);  //刪除監聽事件，執行取消默認行為
                }
            }else{ //ie
                el.detachEvent('onmousewheel', wheelHash[fn]);
            }
                delete wheelHash[fn]; //刪除 默認行為函數
        },
    }
})();


//定義滾輪事件
// var myWheel = function(e){
    // console.log(e.wheelDir);
// }
//添加滾輪事件
// mouseWheel.on(element, myWheel);
//刪除滾輪事件
// mouseWheel.un(element, myWheel);