JavaScript implémente la désactivation des événements de la molette de la souris

Cet article présente principalement les informations pertinentes sur la désactivation des événements de la molette de la souris dans JavaScript. Les amis dans le besoin peuvent s'y référer.

Nous ajustons généralement la compatibilité des versions inférieures d’IE lorsqu’il s’agit d’éléments compatibles, mais cette fois, ce n’est pas parce que la version inférieure du navigateur est incompétente. C'est parce que Firefox est allé trop loin et ignore complètement l'expérience des autres navigateurs. Tous les navigateurs, à l'exception de Firefox, peuvent utiliser l'événement MouseWheel pour gérer la réponse de la molette de la souris. Cependant, Firefox ne prend pas en charge MouseWheel et utilise le absurde DOMMouseScroll, qui n'est pas compatible avec d'autres navigateurs à l'exception de Firefox. En d’autres termes, pour gérer les événements de la molette de la souris, Firefox ne peut utiliser que DOMMouseScroll. Les non-Firefox ne peuvent utiliser que MouseWheel. Les principes de ces deux événements sont différents, et les données qu’ils traitent sont également différentes.

1. varfirefox=navigator.userAgent.indexOf('Firefox')!=-1;
2. firefox?img.addEventListener('DOMMouseScroll',MouseWheel,false) :
3. (img.onmousewheel=MouseWheel);
5. fonctionMouseWheel(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. }

Jetons un coup d'œil au code complet

1. <!DOCTYPEhtml>
2. <style>
3. span{font:14px/20pxMicrosoft Yahei;}
4. #comptoir{
5. largeur : 50 px ; hauteur : 20 px ;
6. bordure : 1pxsolid#CCC ;
7. arrière-plan :#F9F9F9 ;
8. police : 14px/20pxConsolas ;
9. texte-align:centre;
10. marge : 10 px ;
11. }
12. </style>
13. <span>Utilisez la molette de la souris pour ajuster la valeur</span><br/>
14. <divid=compteur>0</div>
15. <script>
16. // Juger le navigateur
17. varisIE=navigator.userAgent.match(/MSIE(/d)/i);
18. isIE=isIE?isIE[1]:indéfini;
19. varisFF=/FireFox/i.test(navigator.userAgent);
20. //Obtenir des éléments
21. varcounter=document.getElementById(counter);
22. //Événement de la molette de la souris
23. if(isIE<9)//Les navigateurs traditionnels utilisent l'événement MouseWheel
24. counter.attachEvent(onmousewheel,function(){
25. //Calculer la distance parcourue par la molette de la souris
26. //Une grille comporte 3 lignes, chaque ligne comporte 40 pixels, donc divisez par 120
27. varv=event.wheelDelta/120;
28. compteur.innerHTML=compteur.innerHTML*1+v;
29. // Bloquer la méthode par défaut du navigateur
30. returnfalse ;
31. });
32. elseif(!isFF)//Les navigateurs modernes, à l'exception de Firefox, utilisent également l'événement MouseWheel
33. counter.addEventListener(mousewheel,function(e){
34. //Calculer la distance parcourue par la molette de la souris
35. varv=e.wheelDelta/120;
36. compteur.innerHTML=compteur.innerHTML*1+v;
37. // Bloquer la méthode par défaut du navigateur
38. e.preventDefault();
39. },FAUX);
40. else//L'étrange Firefox utilise l'événement DOMMouseScroll
41. counter.addEventListener(DOMMouseScroll,function(e){
42. //Calculer la distance parcourue par la molette de la souris
43. //Une grille est composée de 3 lignes, mais veuillez noter que la différence ici avec les pixels est qu'il s'agit d'une valeur négative
44. varv=-e.detail/3;
45. compteur.innerHTML=compteur.innerHTML*1+v;
46. // Bloquer la méthode par défaut du navigateur
47. e.preventDefault();
48. },FAUX);
49. </script>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.