鼠标滚轮事件兼容性处理
2018-06-15 本文已影响0人
阿古瓜
一般版
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>鼠标滚轮事件兼容性处理</title>
<style type="text/css">
#box { width: 100px;height: 100px;background: red;}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
if(oBox.addEventListener){
// Ie9+和chrome下 绑定鼠标滚轮事件
oBox.addEventListener('mousewheel', fnscroll, false);
// firefox下 绑定鼠标滚轮事件
oBox.addEventListener('DOMMouseScroll', fnscroll, false);
} else {
oBox.attachEvent('onmousewheel', fnscroll);
}
function fnscroll(ev){
var ev = ev || event;
var fx = null;
// Ie和chrome下 鼠标滚轮向上大于0；
ev.wheelDelta && (fx = ev.wheelDelta>0 );
// firefox下 鼠标滚轮向上小于0
ev.detail && (fx = ev.detail < 0 );
// 取出当前元素的height
var h = oBox.clientHeight;
// 当鼠标滚轮向上时，盒子高度减少；向下时，盒子高度增加；
oBox.style.height = h + ( fx ? -5 : 5 ) + 'px';
// 阻止通过addEventListener绑定而触发的默认行为 ;
ev.preventDefault && ev.preventDefault() ;
return false; // 阻止默认事件，通过On事件名称所触发的默认行为（Ie）；
}
}
</script>
</head>
<body> <div id="box"> </div> </body> </html>
精炼版
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#box { width: 100px;height: 100px;background: red;}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
if(oBox.addEventListener){
// Ie9+和chrome下 绑定鼠标滚轮事件
oBox.addEventListener('mousewheel', fnscroll, false);
// firefox下 绑定鼠标滚轮事件
oBox.addEventListener('DOMMouseScroll', fnscroll, false);
} else {
// Ie8以下
oBox.attachEvent('onmousewheel', fnscroll);
}
// 滚动鼠标滚轮而改变盒子高度;
function fnscroll(ev){
var ev = ev || event;
var fx = null; // 标记鼠标滚轮的方向，向上为真，向下为负；
var h = oBox.clientHeight;
fx = ev.wheelDelta ? ev.wheelDelta > 0 : ev.detail < 0 ;
oBox.style.height = h + ( fx ? -5 : 5 ) + 'px';
// 阻止通过addEventListener绑定而触发的默认行为 ;
ev.preventDefault && ev.preventDefault() ;
return false; // 阻止默认事件，通过On事件名称所触发的默认行为（IE）；
}
}
</script>
</head>
<body><div id="box"></div></body></html>
