鼠標滾輪事件介紹

簡介

　　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則單獨做兼容處理。

　　

addEvent = function(type,callback,useCapture){
    if(window.addEventListener){
        this.addEventListener(type,callback,!!useCapture);
    }else if(window.attachEvent){
        this.attachEvent('on'+type,callback);
    }
    return callback;
}
wheel = function(el,callback){
    var type = 'mousewheel';
    try{
        document.createEvent('MouseScrollEvents');
        type = 'DOMMouseScroll';
    }catch(e){}
    el.addEvent = addEvent;
    el.addEvent(type,function(e){
        e = e || window.event;
        var wheelDelta,delta;
        if('wheelDelta' in e){
            wheelDelta = e.wheelDelta;  // 正數向上滾動
            if(window.opera && window.opera.version() < 10){
                e.delta = parseInt(-wheelDelta) / 120;  // safari 下的wheeldelta為浮點數
            }
            e.delta = parseInt(wheelDelta) / 120;
        }else if('detail' in e){
            e.wheelDelta = -e.detail * 40; //修復firefox下沒有wheelDelta的bug，detail為+-3
            e.delta = e.wheelDelta / 120;
        }
        callback.call(el,e);
        //阻止向上冒泡
        e.stopPropagation && e.stopPropagation();
        if("stopBubble" in e) e.stopBubble = true;
        return false;
    },false);
};