鼠標滾動事件 · 前端

兼容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> ```