js兼容所有浏览器鼠标键滚动事件源码实例

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > js兼容所有浏览器鼠标键滚动事件源码实例

现在的鼠标基本都会有鼠标中键，滚动这个中键也会触发一个事件，但是这个事件具有很大的浏览器兼容性问题，下面就通过代码实例介绍一下如何利用javascript实现兼容所有主流浏览器的鼠标中键效果。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
#thediv{
  width:100px;
  height:100px;
  background:red;
}
</style>
<script type="text/javascript">
function getData(event){ 
  var ev=event||window.event; 
  var data=(-ev.detail/3)||(ev.wheelDelta/120);
  this.style.width=(this.offsetWidth+data)+"px";
  this.style.height=(this.offsetHeight+data)+"px";
} 
  
function done(el,fn){
  if(document.addEventListener&&document.mozHidden!==undefined){
    el.addEventListener("DOMMouseScroll",fn,false);
  }
  else if(document.addEventListener&&document.mozHidden==undefined){
    el.addEventListener("mousewheel",fn,false)
  }
  else{
    el.attachEvent('onmousewheel',fn)
  }
}
window.onload=function(){
  var odiv=document.getElementById("thediv");
  done(odiv,getData);
}
</script> 
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

代码描述：js兼容所有浏览器鼠标键滚动事件。js兼容所有浏览器鼠标键滚动事件源码实例

下载全部收藏

144 191

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册