Mouse Wheel Programming In JavaScript

在JS編程當中常常會用到鼠標滾輪事件,可是要實現這個效果不得不考慮兼容狀況javascript

存在的兼容性問題:java

  1. 事件對象兼容,IE是window.event,而FF只須要傳個參數(event)就行
  2. 滾輪事件:IE/Chrome 使用onmousewheel,而FF就獨樹一幟,使用DOMMouseScroll
  3. 獲取滾輪的值:IE/Chrome使用onmousewheel的事件對象event的wheelDelta,而FF採用的是detail
  4. IE/Chrome向上滾動爲120,向下滾動爲-120;FF向上滾動爲-3,向下滾動爲3

貼碼:編程

var oDelta=document.getElementById('Delta');
var num=0;
function mouseScroll(e){
    //事件對象兼容
    var e=e||window.event;
    var down=null;
    if(e.wheelDelta){
        down=e.wheelDelta;//IE,Chrome
    }else{
        down=-e.detail;//FF,注意負號
    }
    counter(down);
}

//添加事件
if(document.addEventListener){document.addEventListener("DOMMouseScroll",mouseScroll,false);}//FF
document.onmousewheel=mouseScroll;//IE/Chrome

//計數
function counter(count){
    if(count>0){
        oDelta.value=num++;
    }else if(count<0){
        oDelta.value=num--;
    }
}

注:至於其餘瀏覽器:如Opera,Safari.本人沒有測試,查資料(傳送門)得知,和IE/Chrome同樣,只有FF獨特瀏覽器

相關文章
相關標籤/搜索