我们在日常使用中会经常使事件用到鼠标滚轮，但是当我们想自定义鼠标滚轮事件时就会遇到一些麻烦--滚轮事件的兼容性有些独特。我们来看一下。
/*
* 滚轮事件
* onmousewheel
* 兼容chrome和IE 不兼容火狐
* e.wheelDelta;
* 记录滚动事件的方向
* 负值是往后拉
* 正值就是往前推
* 为120的倍数
**/
obj.onmousewheel =function (e) {
//...
}
/*
* 滚轮事件
* DOMMouseScroll
* 只支持火狐
* e.detail;
* 记录滚动事件的方向
* 正值是往后拉
* 负值就是往前推
* 为3的倍数
**/
obj.DOMMouseScroll=function (e) {
//...
}
这是我们在使用时就要注意这两种方法的差别，主要是滚动事件的方向记录。
- 前滚后滚记录的正负值不同
- 每次滚动记录的值得大小不同
所谓我们写兼容的时候要考虑这个问题
兼容写法：
function mousewheel(obj,fn) {
function eFn(e) {
e = e || window.event;
if(fn.call(this,e,-e.wheelDelta/120||e.detail/3)===false)!-[1,]?e.returnValue=false:e.preventDefault();
}
var eName = document.onmousewheel===null?"mousewheel":"DOMMouseScroll";
document.addEventListener?obj.addEventListener(eName,eFn):obj.attachEvent("on"+eName,eFn)
}
//添加事件
function addEvent(obj,eName,eFn) {
if(obj.attachEvent){ //判断支不支持attacgevent方法，如果支持就是ie678
obj.attachEvent("on"+eName,eFn) //兼容IE678
}else{
obj.addEventListener(eName,eFn)//兼容标准浏览器
}
}
