鼠标滚轮事件,解决兼容浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById('box1')
box1.onmousewheel = function (event) {
event = event || window.event
// wheelDelta火狐中不支持
// detail火狐中支持
if (event.wheelDelta > 0 || event.detail < 0) {
box1.style.height = box1.clientHeight - 10 + 'px'
} else {
box1.style.height = box1.clientHeight + 10 + 'px'
}
// 使用addEventListener()方法绑定的响应函数,取消默认行为不能使用return false
// 需要使用event来取消
event.preventDefault && event.preventDefault()
// 当滚轮滚动的时候,如果浏览器有滚动条,滚动条会随之滚动
// 这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
return false
}
// 为火狐绑定滚轮事件
bind(box1, 'DOMMouseScroll', box1.onmousewheel)
// 兼容浏览器多个事件绑定方式
/*
obj 要绑定的事件对象
eventStr 事件的字符串(不要on)
callback
*/
function bind(obj, eventStr, callback) {
if (obj.addEventListener) {
// 大部分浏览器兼容方式
obj.addEventListener(eventStr, callback, false)
} else {
// IE8及以下
obj.attachEvent('on' + eventStr, function () {
// 因为浏览器不同,在ie8中this指向为window,需要改变this的指向
callback.call(obj)
})
}
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>