JavaScript系列之鼠標滾輪事件

鼠標滾輪事件

當在被綁定的對象上(如：某個div或者doucument)發生鼠標滾輪滾動時觸發。

在不一樣的瀏覽器中有不一樣的表現形式：

1、ie/chrome下的事件 :　onmousewheel

1. 事件綁定方式：on 或者 addEventListener[attachEvent]
2. 獲取滾輪事件具體信息：event.wheelDelta

向上滾動up：120 
     向下滾動down: -120

2、firefox 下的事件: DOMMouseScroll

1. 事件綁定方式：addEventListener
2. 獲取滾輪事件具體信息：event.detail

向上滾動up: -3
     向下滾動down: 3

/*
    封裝一個函數：
    obj <object> 須要加鼠標滾輪事件的對象
    upFn <function> 當滾輪向上滾動時執行的函數
    downFn <function> 當滾輪向下滾動時執行的函數

*/

function wheel(obj,upFn,downFn) {

    if(arguments.length < 3){
        alert('Sorry,你輸入的參數不夠');
    }

    obj.onmousewheel = fn;  

    obj.addEventListener && obj.addEventListener('DOMMouseScroll',fn,false);

    function fn(ev){

        var ev = ev || window.event;

        var bool = true;

        if(ev.wheelDelta){
            bool = ev.wheelDelta > 0 ? true : false;
        }else if(ev.detail){
            bool = ev.detail < 0 ? true : false;
        }

        bool && upFn();
        (!bool) && downFn();

        //prevent(ev);

    }
}

都存在的問題

當頁面自己就存在滾動條時就會出現異常，解決辦法：阻止瀏覽器的默認行爲

ie：returnValue = false
DOM：preventDefault()

/*
    阻止默認行爲函數
*/
function prevent(evt){

    if(evt.preventDefault){
        evt.preventDefault();
    }else{
        evt.returnValue = false;
    }

}

//將wheel函數中的prevent(ev)前註釋去掉便可