学鼠标滚轮事件兼容写法

Posted 2020-07-25 蓝色幻想728

鼠标滚轮的写法要注意以下几个知识点：

• ie,chrome下有onmousewheel事件，而ff是DOMMouseScroll事件，而且只能通过addEventListener来添加，而同时为了兼顾ie9下面所以在事件添加的时候就要做判断
• 为了判断是向上还是向下滚动，ie和chrome下是通过event事件对象的wheelDelta属性来判断，而ff下是event的detail值判断，但由于向上和向下滚动对应的正负关系，wheelDelta和detail正好是相反的，那可以直接通过正负值来判断滚动的方向
• 鼠标滚动的时候会触发浏览器的默认事件，就是滚动可视区，为了阻止默认事件，ie和chrome可以用return false来阻止，但是ff下因为是通过addEventListener添加的事件，只能用event对象下的preventDefault()方法来阻止，同时也要做好兼容判断

window.onload=function(){
 var oDiv = document.getElementById(‘cover‘);
    oDiv.onmousewheel = fn; //这个无论ie什么版本都支持，chrome也支持，但是ff不支持
 if(oDiv.addEventListener){ //为了支持ie9一下的版本，所以不能单独直接写addEventListener，要判断一下再用，即使是在标准的浏览器下，给它绑定一个不存在的事件也是不会有什么问题的
        oDiv.addEventListener(‘DOMMouseScroll‘,fn,false); //这个是ff专有的鼠标滚轮事件，而且只能通过addEventListener来加
 }
 
 function fn(ev){
 var ev = ev||event;
 var b = true;
 if(ev.wheelDelta){ //通过这个判断就可以统一三种浏览器下对滚轮往上还是往下滚
            b = ev.wheelDelta>0? true:false; //chrome和ie下
 }else{
            b = ev.detail<0? true:false; //ff下
 }
 
 if(b){
            alert(‘上‘);
 }else{
            alert(‘下‘);
 }
 //以下这段是为了防止按滚轮时执行浏览器的默认事件，不让可视窗口往下滚动
 if(ev.preventDefault){ //因为ff下是通过addEventListener添加的，不支持return false这样的阻止默认事件，而需要用到event对象下的preventDefault()方法。
            ev.preventDefault();
 }
 return false;
 }
};