saber 酱的抱枕

各个浏览器在鼠标滚轮事件上的兼容性问题简直可以让人抓狂。事件名、添加事件的方法、向上向下滚动的判断这三部分的兼容都存在差异。今天看到了一片文章——《JS事件-鼠标滚轮事件》，整理修改了一下，亲测有效。

function addEvent(obj,xEvent,fn) {//区别浏览器来添加鼠标滚轮事件
    if(obj.attachEvent){
        obj.attachEvent('on'+xEvent,fn);
    }else{
        obj.addEventListener(xEvent,fn,false);
    }
}  

var oDiv = document.body;
addEvent(oDiv,'mousewheel',onMouseWheel);
addEvent(oDiv,'DOMMouseScroll',onMouseWheel);

function onMouseWheel(ev) {//当鼠标滚动时执行
    var ev = ev || window.event;
    var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
        down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
    if(down){
        alert("向下");
    }else{
        alert("向上");
    }
    /*下面这条语句可以阻止所有浏览器中的滚动条滚动
    if(ev.preventDefault){  //FF 和 Chrome
        ev.preventDefault();// 阻止默认事件
    }
    */
    //return false;//执行中出现return false语句会在IE8中阻止滚动条滚动，在其他浏览器中则需要上面的语句
}

第一部分和中间部分是给指定的元素添加鼠标滚动事件，第三部分是当鼠标滚动时要执行的代码。这里面判断鼠标方向和阻止浏览器默认行为的代码可以按需删改。

此代码在chromeV44、firefoxV39、IE11、IE8中测试通过。

向上向下这部分代码非常实用。用这个做了用鼠标滚轮缩放图片的demo，代码如下：

<img src="/f/%E6%98%A5%E6%97%A5.jpg" alt="" id="zoomimg" width="450" height="253">
<script>
function addEvent(obj,xEvent,fn) {//区别浏览器来添加鼠标滚轮事件
    if(obj.attachEvent){
        obj.attachEvent('on'+xEvent,fn);
    }else{
        obj.addEventListener(xEvent,fn,false);
    }
}  

var zoomimg = document.getElementById("zoomimg");
addEvent(zoomimg,'mousewheel',onMouseWheel);
addEvent(zoomimg,'DOMMouseScroll',onMouseWheel);

function onMouseWheel(ev) {//当鼠标滚动时执行
    var ev = ev || window.event;
    var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
    down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
    if(ev.preventDefault){  //FF 和 Chrome
        ev.preventDefault();// 阻止默认事件
    }
    if(down){
        if (zoomimg.width<100||zoomimg.height<100) {//限制最小宽高
            return false;
        }else{
            zoomimg.width-=zoomimg.width*0.1;
            zoomimg.height-=zoomimg.height*0.1;
        };
    }else{//最大宽高不能超出浏览器窗口可用宽高
        if (zoomimg.width+zoomimg.width*0.1>=window.innerWidth||zoomimg.height+zoomimg.height*0.1>=window.innerHeight) {
            return false;
        }else{
            zoomimg.width+=zoomimg.width*0.1;
            zoomimg.height+=zoomimg.height*0.1;
        };
    }
}
</script>

图片的最大宽高限制在IE8下无效，因为ie8不支持window.innerHeight、innerWidth……

js中对鼠标滚动事件的兼容性处理