JavaScript implementa la desactivación de eventos de rueda del mouse

Este artículo presenta principalmente información relevante sobre cómo deshabilitar los eventos de la rueda del mouse en JavaScript. Los amigos que lo necesiten pueden consultarlo.

Generalmente ajustamos la compatibilidad de las versiones inferiores de IE cuando se trata de cosas compatibles, pero esta vez no es porque la versión inferior del navegador sea incompetente. Es porque Firefox ha ido demasiado lejos y ignora por completo la experiencia de otros navegadores. Todos los navegadores excepto Firefox pueden usar el evento MouseWheel para manejar la respuesta de la rueda del mouse. Sin embargo, Firefox no es compatible con MouseWheel y utiliza el absurdo DOMMouseScroll, que no es compatible con otros navegadores excepto Firefox. En otras palabras, para manejar eventos de la rueda del mouse, Firefox solo puede usar DOMMouseScroll. Los que no son de Firefox solo pueden usar MouseWheel. Los principios de estos dos eventos son diferentes y los datos que procesan también son diferentes.

1. varfirefox=navigator.userAgent.indexOf('Firefox')!=-1;
2. firefox?img.addEventListener('DOMMouseScroll',MouseWheel,false):
3. (img.onmousewheel=Rueda del ratón);
5. funciónMouseWheel(e){
6. e=e||ventana.evento;
8. if(e.stopPropagation)e.stopPropagation();
9. else.cancelBubble=true;
11. if(e.preventDefault)e.preventDefault();
12. elsee.returnValue=false;
14. }

Echemos un vistazo al código completo.

1. <!DOCTYPEhtml>
2. <estilo>
3. abarca {font:14px/20pxMicrosoft Yahei;}
4. #encimera{
5. ancho: 50 px; alto: 20 px;
6. borde:1pxsolid#CCC;
7. fondo:#F9F9F9;
8. fuente:14px/20pxConsolas;
9. alineación de texto:centro;
10. margen: 10px;
11. }
12. </estilo>
13. <span>Utilice la rueda del ratón para ajustar el valor</span><br/>
14. <divid=contador>0</div>
15. <guión>
16. //Juzga el navegador
17. varisIE=navigator.userAgent.match(/MSIE(/d)/i);
18. esIE=esIE?esIE[1]:indefinido;
19. varisFF=/FireFox/i.test(navigator.userAgent);
20. //Obtener elementos
21. varcounter=document.getElementById(contador);
22. //evento de la rueda del mouse
23. if(isIE<9)//Los navegadores tradicionales usan el evento MouseWheel
24. contador.attachEvent(en la rueda del mouse,función(){
25. //Calcula la distancia que recorre la rueda del ratón
26. //Una cuadrícula tiene 3 líneas, cada línea tiene 40 píxeles, así que divídela entre 120
27. varv=event.wheelDelta/120;
28. contador.innerHTML=contador.innerHTML*1+v;
29. //Bloquear el método predeterminado del navegador
30. retornofalso;
31. });
32. elseif(!isFF)//Los navegadores modernos, excepto Firefox, también utilizan el evento MouseWheel
33. contador.addEventListener(rueda del mouse,función(e){
34. //Calcula la distancia que recorre la rueda del ratón
35. varv=e.wheelDelta/120;
36. contador.innerHTML=contador.innerHTML*1+v;
37. //Bloquear el método predeterminado del navegador
38. e.preventDefault();
39. },FALSO);
40. else//El extraño Firefox usa el evento DOMMouseScroll
41. contador.addEventListener(DOMMouseScroll,función(e){
42. //Calcula la distancia que recorre la rueda del ratón
43. //Una cuadrícula tiene 3 líneas, pero tenga en cuenta que la diferencia aquí con los píxeles es que es un valor negativo
44. varv=-e.detail/3;
45. contador.innerHTML=contador.innerHTML*1+v;
46. //Bloquear el método predeterminado del navegador
47. e.preventDefault();
48. },FALSO);
49. </script>

Lo anterior es el contenido completo de este artículo, espero que les guste a todos.