鼠标滚轮事件问题-总结

由于年底马上就要做一个项目，可能要用到鼠标滚轮的应用，所以今天特地复习及总结一番。

首先我们先看一张图，看在各浏览器鼠标滚轮定义的事件和属性有什么不同。

注意三个问题：

1，ie/chrome鼠标滚轮的处理方法和firefox鼠标滚轮的处理方法

2，鼠标滚轮方向性在ie/chrome 和firefox里的不同及处理方法

3，阻止默认事件在ie/chrome和firefox的不同及处理方法

最后会贴出一个例子（用鼠标滚轮控制div高度的大小）

问题一：ie/chrome鼠标滚轮的处理方法和firefox鼠标滚轮的处理方法

首先ie/chrome 里加鼠标滚轮事件的方法是 obj.onmousewheel=fn

然后在火狐浏览器里firefox:通过事件绑定DOMMouseScroll事件

obj.addEventListener('DOMMouseScroll',mousewheel,false);

解决办法：加判断

//ie chrome
    obj.onmousewheel=fn;
    if(obj.addEventListener){
        //火狐
        obj.addEventListener('DOMMouseScroll',fn,false);
    }

问题二：鼠标滚轮方向性在ie/chrome 和firefox里的不同及处理方法

ie/chrome鼠标滚动值 event.wheelDelta

//ie chrome
    obj.onmousewheel=fn;
    if(obj.addEventListener){
        //火狐
        obj.addEventListener('DOMMouseScroll',fn,false);
    }
function fn(ev){
        var oEvent=ev||event;
        console.log(oEvent.wheelDelta)
        //向上滚动为120
        //向下滚动为-120
        
    }

firefox鼠标滚动值event.detail

//ie chrome
    obj.onmousewheel=fn;
    if(obj.addEventListener){
        //火狐
        obj.addEventListener('DOMMouseScroll',fn,false);
    }
function fn(ev){
        var oEvent=ev||event;
        console.log(event.detail)
        //向上滚动为-3
        //向下滚动为3
        
    }

看到这里我们可以看到ie/chrome和firefox里鼠标滚动的值的写法不一样而且上下的值也是相反的，现在我们该像之前事件那样用判断来做兼容，代码：

//ie chrome
    obj.onmousewheel=fn;
    if(obj.addEventListener){
        //火狐
        obj.addEventListener('DOMMouseScroll',fn,false);
    }
function fn(ev){
        //处理上下的兼容性问题
        var dir=true;//默认值
        if(oEvent.wheelDelta){
            //ie和chrome
            dir=oEvent.wheelDelta>0?true:false;    
        }else{
            //firefox
            dir=oEvent.detail<0?true:false;
        }
        //根据滚轮方向设定具体业务逻辑
        if(dir){
            //do something tyre为滚轮向上
        }else{
            //do something  false为滚轮向下
        }
        
}

问题三：现在我们解决了前2个问题，那么我们来看看最后一个问题是什么：

就是当页面过长的时候，我们操作div用滚轮滚动，我们本来是想鼠标滚轮操作div的，但同样也会触发浏览器的默认滚动条，所以我们要阻止浏览器的默认行为。

处理方法：

// addEventLisrener 绑定的时间需要通过event对象下面的的 preventDefaul
        if(oEvent.preventDefault){
            oEvent.preventDefault();
        }
        return false;//阻止默认行为(阻止的是 obj.on时间名称=fn 所触发的默认行为)

firefox用preventDefault(),ie/chrome用return false;

例子：用鼠标滚轮事件控制div的高度，上代码。

window.onload=function(){
    var oBox=document.getElementById('box');
    //ie chrome
    document.onmousewheel=mousewheel;
    if(document.addEventListener){
        //火狐
        document.addEventListener('DOMMouseScroll',mousewheel,false);
    }
    
    function mousewheel(ev){
        var oEvent=ev||event;
        //alert(oEvent.detail)
        //alert(oEvent.detail)
        //处理上下的兼容性问题
        var dir=true;
        if(oEvent.wheelDelta){
            dir=oEvent.wheelDelta>0?true:false;    
        }else{
            dir=oEvent.detail<0?true:false;
        }
        //根据手表方向设定具体业务逻辑
        if(dir){
            oBox.style.height=oBox.offsetHeight-10+'px';    
        }else{
            oBox.style.height=oBox.offsetHeight+10+'px';
        }
        // addEventLisrener 绑定的时间需要通过event对象下面的的 preventDefaul
        if(oEvent.preventDefault){
            oEvent.preventDefault();
        }
        return false;//阻止默认行为(阻止的是 obj.on时间名称=fn 所触发的默认行为)
        
    }    
}