【学】鼠标滚轮事件兼容写法

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

• 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;

 }

};