事件绑定方式不同
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);
}
function doScroll(ev){
var ev=ev||event;
mouseScroll(ev,function(){
},function(){
});
if(ev.preventDefault)ev.preventDefault();
return false;
}
function mouseScroll(ev,upFn,downFn){
var bDown=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 | IE9+/Firefox17+ |
参考页面
https://developer.mozilla.org/zh-CN/docs/Web/API/MouseScrollEvent