js中的鼠标滚轮事件

时间:2023-03-10 00:44:51
js中的鼠标滚轮事件
##  事件对象 event
1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标)
window.onclick = function(ev){
var oEvent = ev || event;//event为IE8和IE8以下浏览器浏览器事件对象可以直接使用;
//以上代码可以判断是否传递了事件对象参数,如果传递了则使用传递的事件对象ev,否则使用window.event
alert(oEvent.type);//click类型
}
2 事件对象的兼容写法
a.IE8和IE8以下浏览器不能传递参数,只能使用window.event对象。
b.谷歌浏览器既可以传递事件对象参数,也可以使用window.envent对象,十分全面。
c.火狐浏览器只能使用传递的事件对象参数。
因此针对不同浏览器,兼容性写法如下:
事件.事件类型 = function(ev){//事件类型如鼠标点击事件
var oEvent = ev || event;
} ## 鼠标滚轮事件
1 非火狐: mousewheel
这里,event.wheelDelta < 0向下滚动
2 火狐:DOMMouseScroll
这里,event.detail > 0 为向下滚动,event.detail < 0 为向上滚动
3.浏览器兼容性写法如下:
document.onmousewheel = wheelHander;//非火狐
document.addEventListener('DOMMouseScroll',wheelHander,false);//火狐 function wheelHander(e){
//事件的兼容性写法
oEvent = e || window.event;
if(oEvent.wheelDelta){//非火狐
if(oEvent.wheelDelta > 0){//向上滚动 }else{//向下滚动 }
}else if(oEvent.detail){
if(oEvent.detail > 0){//向下滚动 }else{//向上滚动 }
}
} 3 案例:使用滚轮改变图片的大小 var img = document.getElementsByTagName('img')[0]; //非火狐实现滚轮效果
document.onmousewheel = wheelHander;//非火狐
//火狐一家使用DOMMouseScroll实现滚轮效果
document.addEventListener('DOMMouseScroll',wheelHander,false); function wheelHander(e){
oEvent = e || window.event;
if(oEvent.wheelDelta){//非火狐
if(oEvent.wheelDelta > 0){//向上滚动
img.height++;
}else{//向下滚动
img.height--;
}
}else if(oEvent.detail){
if(oEvent.detail > 0){//向下滚动
img.height--;
}else{//向上滚动
img.height++;
}
}
}

获取更多前端知识,请关注下方二维码 ↓↓↓↓↓↓

js中的鼠标滚轮事件