坑爹的鼠标滚轮事件

事件绑定方式不同

IE

赋值/attachEvent

Chrome

赋值/addEventListener

Firefox

addEventListener

 

所以，在写事件的时候，我们要判断一下这个事件是否能用

if(obj.addEventListener){

obj.addEventListener('DOMMouseScroll',function,false);

}

 

这样的话，Chrome和Firefox都会走这个if里面，IE就不走了，但是Chrome里又没有DOMMouseScroll这个事件。

 

绑定事件的名称不同

IE

onMouseWheel

Chrome

onMouseWheel

Firefox

DOMMouseScroll

 

方法的属性不同

鼠标滚轮不只是滚了就好了，这个还要知道是往上滚了还是往下滚了啊。所以就要个属性有个值判断一下。

这个就很容易理解了，方法的名称就不一样嘛。这个时候因为方法就两个，所以就两种情况了。

IE/Chrome

wheelDelta

Firefox

detail

 

属性所得方向值的符号不同

这个就有点坑爹了，这个简直就是举手之劳啊，改变一下符号的事情。

名称/方向

IE/Chrome/WheelDelta

Firefox/detail

向上

正值

负值

向下

负值

正值

这个值是不固定的，课上老师说好像和鼠标或者触摸板的DPI有关，每次滚动的距离越长，这个值的绝对值就越大，但是这两个属性得到的值还是不一样的，所以这个值也不能拿来参考。Firefox的值比较小。

没错，为了统一表示方向，我们在做兼容的时候还要自己设定一个开关，通过判断统一一下向上还是向下。

 

还有神IE

这里的兼容简直就是一种习惯了，那就是事件的名称不同，其他浏览器都是绑定函数的第一个参数，这货非要自己写一个，叫event。所以也还得兼容这货。

最后的的成果

我们写出来的能一次性搞定的，兼容所有浏览器的鼠标滚轮事件的函数就是这个样子。

 

if(obj.addEventListener){

obj.addEventListener('DOMMouseScroll',function,false);

}

functiondoScroll(ev){

var ev=ev||event;

mouseScroll(ev,function(){

},function(){

});

 

if(ev.preventDefault)ev.preventDefault();

returnfalse;

}

 

functionmouseScroll(ev,upFn,downFn){

varbDown=true;

 

if(ev.wheelDelta){

bDown=!ev.wheelDelta<0;

}else{

bDown=ev.detail<0;

}

 

if(bDown){

if(typeofdownFn=='function')downFn();

}else{

if(typeofupFn=='function')upFn();

}

 

}

 

写在最最后

 

先不管个事件表现出来的函数绑定方式不一样，就说这个事件名称。

现在我们看到一共有两个事件名称，一个是mouseWheel，另外一个是DOMMouseScroll。平时我们常管Chrome和Firefox叫标准浏览器，但是这个时候两者的表现居然不一样。到底哪个才是标准呢？

答案是：都不是标准的！！大跌眼镜吧。

但是为什么有都不用标准的呢？那是因为没有标准啊……让我们再跌一次眼镜吧。

不过也只是以前没有标准，现在有了。

事件类型

事件对象

是否标准

兼容性

Mousewheel

MouseWheelEvent

非标准

IE/Chrome

DOMMouseScroll

MouseScrollEvent

非标准

Firefox

Wheel

wheelEvent

DOM Level 3

IE9+/Firefox17+

参考页面

https://developer.mozilla.org/zh-CN/docs/Web/API/MouseScrollEvent