JavaScript滾輪事件兼容性寫法

研究滾輪事件是因為在做一個翻版的fullpage.js，需要通過監聽滾輪事件進行翻頁。在實現過程中遇到了一些兼容性問題處理。所以順便封裝了個方法wheel(upFn, downFn)，方便日后調用。

但W3C并沒有對鼠標滾輪事件進行規范，各瀏覽器廠商封裝了不同的實現方法，事件屬性也不一樣，號稱最標準的FireFox，用了一個私有實現DOMMouseScroll。不過，其他瀏覽器都是用onmousewheel實現，所以做兼容處理的難度也不大。

在FireFox下，DOMMouseScroll必須通過addEventListener來綁定，如：
element.addEventListener("DOMMouseScroll",func,false) ；

在非FireFox下，就沒有限制了，除了addEventListener方法，還可用下邊的代碼：
element.onmousewheel=function(){}；

封裝代碼如下：

// 滾輪響應事件
// 參數：type有兩個屬性值，分別為"up"（滾輪向上）和"down"（滾輪向下）
function wheel(upFn, downFn) {
    // IE6
    window.onmousewheel = getWheelDalta;
    // Firefox
    if(window.addEventListener) {
        window.addEventListener("DOMMouseScroll", getWheelDalta, false);
    }
    // 獲得鼠標滾輪事件
    function getWheelDalta(event) {
        var event = event || window.event;
        var delta = 0;
        // delta的返回值為正時，表示向前滾動；delta的返回值為負時，表示向后滾動；
        if (event.wheelDelta) {
            // IE中，鼠標滾輪信息存放在wheelDelta屬性中；向前滾動時，wheelDelta的值是120的倍數；向后滾動時，wheelDelta的值是-120的倍數；
            delta = event.wheelDelta/120; 
            if (window.opera) delta = -delta;
        } else if (event.detail) {
            // Firefox的鼠標滾輪信息存放在detail屬性中；向前滾動，detail的值是-3的倍數；向后滾動，detail的值是3的倍數；
            delta = -event.detail/3;
        }
        // 執行滾輪事件函數
        if(delta > 0) {
            upFn();
        }else {
            downFn();
        }

        // 阻止默認行為，防止當頁面本身就存在滾動條時出現的異常
        prevent(event);
        function prevent(evt){
            if(evt.preventDefault){
                evt.preventDefault();
            }else{
                evt.returnValue = false;
            }
        }
    }   
}

測試調用：

function wheelUp() {
    alert("wheelUp");
}
function wheelDown() {
    alert("wheelDown");
}
wheel(wheelUp, wheelDown);

來自：http://www.dengzhr.com/js/440