javascript實作禁止滑鼠滾輪事件

這篇文章主要介紹了javascript實現禁止滑鼠滾輪事件的相關資料,需要的朋友可以參考下

平常我們相容什麼東西總是在調整低版IE的相容性，但這回不是因為低版瀏覽器不給力。而是因為火狐給力過頭了，完全不顧其它瀏覽器的感受標新立異了。除了火狐之外，所有的瀏覽器都可以使用MouseWheel事件來處理滑鼠滾輪的回應。但火狐卻偏偏不支援MouseWheel，使用無厘頭的DOMMouseScroll，這玩意兒除了火狐以外其它瀏覽器都不相容。也就是說，對於滑鼠滾輪事件的處理，火狐只能使用DOMMouseScroll。而非火狐則只能使用MouseWheel。這兩種事件實現的原理不同，他們處理的資料也不同。

1. varfirefox=navigator.userAgent.indexOf('Firefox')!=-1;
2. firefox?img.addEventListener('DOMMouseScroll',MouseWheel,false):
3. (img.onmousewheel=MouseWheel);
5. functionMouseWheel(e){
6. e=e||window.event;
8. if(e.stopPropagation)e.stopPropagation();
9. elsee.cancelBubble=true;
11. if(e.preventDefault)e.preventDefault();
12. elsee.returnValue=false;
14. }

我們來看個完整的程式碼

1. <!DOCTYPEhtml>
2. <style>
3. span{font:14px/20px微軟雅黑;}
4. #counter{
5. width:50px;height:20px;
6. border:1pxsolid#CCC;
7. background:#F9F9F9;
8. font:14px/20pxConsolas;
9. text-align:center;
10. margin:10px;
11. }
12. </style>
13. <span>使用滑鼠滾輪調整數值大小</span><br/>
14. <divid=counter>0</div>
15. <script>
16. //判斷瀏覽器
17. varisIE=navigator.userAgent.match(/MSIE(/d)/i);
18. isIE=isIE?isIE[1]:undefined;
19. varisFF=/FireFox/i.test(navigator.userAgent);
20. //取得元素
21. varcounter=document.getElementById(counter);
22. //滑鼠滾輪事件
23. if(isIE<9)//傳統瀏覽器使用MouseWheel事件
24. counter.attachEvent(onmousewheel,function(){
25. //計算滑鼠滾輪滾動的距離
26. //一格3行，每行40像素，所以除以120
27. varv=event.wheelDelta/120;
28. counter.innerHTML=counter.innerHTML*1+v;
29. //阻止瀏覽器預設方法
30. returnfalse;
31. });
32. elseif(!isFF)//除火狐以外的現代瀏覽器也使用MouseWheel事件
33. counter.addEventListener(mousewheel,function(e){
34. //計算滑鼠滾輪滾動的距離
35. varv=e.wheelDelta/120;
36. counter.innerHTML=counter.innerHTML*1+v;
37. //阻止瀏覽器預設方法
38. e.preventDefault();
39. },false);
40. else//奇葩的火狐使用DOMMouseScroll事件
41. counter.addEventListener(DOMMouseScroll,function(e){
42. //計算滑鼠滾輪滾動的距離
43. //一格是3行，但是要注意，這裡和像素不同的是它是負值
44. varv=-e.detail/3;
45. counter.innerHTML=counter.innerHTML*1+v;
46. //阻止瀏覽器預設方法
47. e.preventDefault();
48. },false);
49. </script>

以上所述就是本文的全部內容了，希望大家能夠喜歡。