09/7
2015
各个浏览器在鼠标滚轮事件上的兼容性问题简直可以让人抓狂。事件名、添加事件的方法、向上向下滚动的判断这三部分的兼容都存在差异。今天看到了一片文章——《JS事件-鼠标滚轮事件》，整理修改了一下，亲测有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <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……
