鼠标滚轮事件
<script>
window.onload= function () {
var div1=document.getElementById('div1');
div1.onmousewheel= function () {
alert(1);
};
if(div1.addEventListener){
div1.addEventListener('DOMMouseScroll',function(){
alert(0);
},false);
}
};
</script><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
border: 1px solid red;
position: absolute;
}
</style>
<script>
window.onload= function () {
var div1=document.getElementById('div1');
var b=true;
div1.onmousewheel=fn;
if(div1.addEventListener){
div1.addEventListener('DOMMouseScroll',fn,false);
}
function fn(ev){
var ev=ev || event;
// alert(ev.wheelDelta); //ie chrome下-120 上120
//ff ev.detail 下 3 上-3
if(ev.wheelDelta){
b=ev.wheelDelta>0?true:false;
}else{
b=ev.detail>0?false:true;
}
if(b){
this.style.height=parseInt(getByClass(this,'height'))-10+'px';
}else{
this.style.height=parseInt(getByClass(this,'height'))+10+'px';
}
if(ev.preventDefault){
ev.preventDefault();
}
return false; //阻止的是obj.on事件名称所触发的默认行为，
// ff是通过addEventListener绑定的，它需要通过ev.preventDefault()
}
function getByClass(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
};
</script>
</head>
<body style="height: 2000px">
<div id="div1"></div>
<!--ie/chrome onmousewheel-->
<!--ff:DOMMouseScroll 必须用addEventListener实现绑定-->
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.01.06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读