一个鼠标滚轮滚动事件的小兼容，瞄一眼或许有用


在开发中会经常遇到一种需求，就是滚动滚动鼠标滚轮改变购买价格，数量，内容等等，这里说一下滚轮的小坑

滚轮事件分成ie、chrome、Firefox

IE/chrome：

1
2
3
obj.onmousewheel=function(){
    alert(88888888);
}

Firefox:火狐没有onmousewheel事件（写了会报错），所以火狐用DOMMouseScroll，并且必须用addEventListener绑定否则IE下会报错，因此可以写个判断

1
2
3
4
5
6
7
if (obj.addEventListener) {//如果有该方法
    obj.addEventListener('DOMMouseScroll',func,false);
}

function func(){
	alert(88888888);
}

解决了绑定事件触发的问题，然后就是判断滚轮方向，判断滚轮方向也分成ie/chrome和Firefox

兼所有浏览器的鼠标滚轮，判断上下：

ie/chrome:event.wheelDelta
Firefox：event.detail

event.wheelDelta和event.detail是两个数字类型的值，ie/chrome滚轮往上是正数，往下是负数，Firefox相反，所以根据这个可以写兼容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//兼容上下滚轮的方法
function func(ev){
    var h=true;
    var ev=ev||event;
    if (ev.wheelDelta) {
        h=ev.wheelDelta>0?true:false;
    }else{
        h=ev.detail>0?false:true;
    }

    if (h) {
        obj.style.属性=滚轮往上做的事;
    }else{
        obj.style.属性=滚轮往下做的事;
    }
}

解决滚动条出现，鼠标滚轮失效问题

这里还有个问题，假如我给页面高度3000，触发浏览器的滚动条，滚轮失效
原因：事件默认行为
解决：阻止默认行为的发生

1
return false;

ie/chrome下问题解决，Firefox问题没解决
原因：return false阻止的是on事件触发的默认行为，Firefox是通过addEventListener绑定的事件处理函数，所以需要通过event下面的preventDefault()阻止。
写法：

1
2
3
if (ev.preventDefault) {
    ev.preventDefault();
}

ie/chrome和Firefox同时可以解决：

1
2
3
4
if (ev.preventDefault) {
    ev.preventDefault();
}
return false;

事件阻止是根据事件绑定进行阻止

例如分别用on和addEventListener禁掉鼠标右键点击文档出现小菜单

1
2
3
4
document.oncontextmenu=function(){
    return false;
}
//禁掉了

1
2
3
4
document.addEventListener('contextmenu',function(){
    return false;
})
//没禁掉

原因：禁掉addEventListener应该用preventDefault();
写法：

document.addEventListener('contextmenu',function(ev){
    var ev=ev||event;
    ev.preventDefault();
})
// 禁掉了