鼠标滚动事件 · 前端

兼容IE8的attachEvent和其他浏览器addEventListener事件绑定的函数 ``` function bind(obj,eventStr,callback){ if(obj.addEventListener){ obj.addEventListener(eventStr,callback,false); }else{ //obj.attachEvent("on"+eventStr,callback); //统一执行顺序：callback.call(obj) obj.attachEvent("on"+eventStr,function(){ callback.call(obj); }); } } ``` 鼠标滚动事件的兼容 ``` <div id="box1" style="width: 100px;height: 100px; background-color: aquamarine;position: absolute;"></div> <script type="text/javascript"> window.onload=function(){ var box1=document.getElementById("box1"); /* 除火狐外鼠标滚动事件 box1.addEventListener("mousewheel",function(event){ console.log("滚了") }) */ box1.onmousewheel=function(event){ console.log("滚了") } /* onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发, 但是火狐不支持该属性在火狐中需要使用DOMMouseScroll来绑定滚动事件注意该事件需要通过addEventListener()函数来绑定且在IE8中可以使用attachEvent()来绑定事件 */ box1.addEventListener("DOMMouseScroll",function(){ console.log(333) }) //这是两个浏览器触发此事件的不同方式，必然有一个不会触发事件， //当有一个不触发事件的时候他在这里就是一个纯粹的函数了 //可以简化成 box1.addEventListener("DOMMouseScroll",box1.onmousewheel) //兼容IE8 bind(box1,"DOMMouseScroll",box1.onmousewheel); </script> ``` 最新版的浏览器（包括火狐）都可以用onwheel（onmousewheel已经废弃了，它是现在主流浏览器都支持的）目前给火狐绑定onwheel事件接受不到event.detail的值都为0 ``` box1.addEventListener("wheel",function(){ console.log(1111) }) //兼容IE8 bind(box1,"wheel",function(){ console.log(1111) }); ``` 例子向上滚动 div变短向下滚动div变长 ``` <body style="height: 1000px;"> <div id="box1" style="width: 100px;height: 100px; background-color: aquamarine;position: absolute;"></div> <div id="box2"></div> <script type="text/javascript"> window.onload=function(){ event=event||window.event; var box1=document.getElementById("box1"); //兼容 //其他浏览器滚动事件 box1.onmousewheel=function(event){ //event.whereDelta 可以获取鼠标滚动的方向， //正120向上，负120向下只看正负，不看大小 //event.whereDelta火狐不支持，火狐中使用event.detail获取滚动方向 //-3 向上 3向下 if (event.wheelDelta>0 || event.detail<0) { //向上滚动 box1变短 box1.style.height=box1.clientHeight-10+"px"; } else{ //向下滚动 box1变长 box1.style.height=box1.clientHeight+10+"px"; } //使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false //需要使用event.preventDefault()来取消默认行为,IE8不支持 event.preventDefault && event.preventDefault(); //当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动, //这是浏览器的默认行为,如果不希望发生,则可以取消默认行为 return false; } //火狐浏览器滚动事件 bind(box1,"DOMMouseScroll",box1.onmousewheel); function bind(obj,eventStr,callback){ if(obj.addEventListener){ obj.addEventListener(eventStr,callback,false); }else{ //obj.attachEvent("on"+eventStr,callback); //统一执行顺序：callback.call(obj) obj.attachEvent("on"+eventStr,function(){ callback.call(obj); }); } } } </script> </body> ```