在开发中会经常遇到一种需求,就是滚动滚动鼠标滚轮改变购买价格,数量,内容等等,这里说一下滚轮的小坑
滚轮事件分成ie、chrome、Firefox
IE/chrome:1
2
3obj.onmousewheel=function(){
alert(88888888);
}
Firefox:火狐没有onmousewheel事件(写了会报错),所以火狐用DOMMouseScroll,并且必须用addEventListener绑定否则IE下会报错,因此可以写个判断1
2
3
4
5
6
7if (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
3if (ev.preventDefault) {
ev.preventDefault();
}
ie/chrome和Firefox同时可以解决:1
2
3
4if (ev.preventDefault) {
ev.preventDefault();
}
return false;
事件阻止是根据事件绑定进行阻止
例如分别用on和addEventListener禁掉鼠标右键点击文档出现小菜单1
2
3
4document.oncontextmenu=function(){
return false;
}
//禁掉了
1 | document.addEventListener('contextmenu',function(){ |
原因:禁掉addEventListener应该用preventDefault();
写法:
document.addEventListener('contextmenu',function(ev){
var ev=ev||event;
ev.preventDefault();
})
// 禁掉了