JavaScript implements disabling mouse wheel events

This article mainly introduces the relevant information about disabling mouse wheel events in JavaScript. Friends in need can refer to it.

We usually adjust the compatibility of lower versions of IE when it comes to compatible things, but this time it’s not because the lower version of the browser is incompetent. It's because Firefox has gone too far and completely disregards the experience of other browsers. All browsers except Firefox can use the MouseWheel event to handle the response of the mouse wheel. However, Firefox does not support MouseWheel, and uses the nonsensical DOMMouseScroll, which is not compatible with other browsers except Firefox. In other words, for handling mouse wheel events, Firefox can only use DOMMouseScroll. Non-Firefox can only use MouseWheel. The principles of these two events are different, and the data they process is also different.

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. }

Let’s take a look at the complete code

1. <!DOCTYPEhtml>
2. <style>
3. span{font:14px/20pxMicrosoft Yahei;}
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>Use the mouse wheel to adjust the value</span><br/>
14. <divid=counter>0</div>
15. <script>
16. //Judge the browser
17. varisIE=navigator.userAgent.match(/MSIE(/d)/i);
18. isIE=isIE?isIE[1]:undefined;
19. varisFF=/FireFox/i.test(navigator.userAgent);
20. //Get elements
21. varcounter=document.getElementById(counter);
22. //Mouse wheel event
23. if(isIE<9)//Traditional browsers use MouseWheel event
24. counter.attachEvent(onmousewheel,function(){
25. //Calculate the distance the mouse wheel scrolls
26. //One grid has 3 lines, each line has 40 pixels, so divide by 120
27. varv=event.wheelDelta/120;
28. counter.innerHTML=counter.innerHTML*1+v;
29. //Block browser default method
30. returnfalse;
31. });
32. elseif(!isFF)//Modern browsers except Firefox also use the MouseWheel event
33. counter.addEventListener(mousewheel,function(e){
34. //Calculate the distance the mouse wheel scrolls
35. varv=e.wheelDelta/120;
36. counter.innerHTML=counter.innerHTML*1+v;
37. //Block browser default method
38. e.preventDefault();
39. },false);
40. else//The weird Firefox uses the DOMMouseScroll event
41. counter.addEventListener(DOMMouseScroll,function(e){
42. //Calculate the distance the mouse wheel scrolls
43. //One grid is 3 lines, but please note that the difference here from pixels is that it is a negative value
44. varv=-e.detail/3;
45. counter.innerHTML=counter.innerHTML*1+v;
46. //Block browser default method
47. e.preventDefault();
48. },false);
49. </script>

The above is the entire content of this article, I hope you all like it.