JavaScript implementa desabilitação de eventos de roda do mouse

Este artigo apresenta principalmente informações relevantes sobre como desabilitar eventos de roda do mouse em JavaScript. Amigos necessitados podem consultá-lo.

Normalmente ajustamos a compatibilidade de versões inferiores do IE quando se trata de coisas compatíveis, mas desta vez não é porque a versão inferior do navegador é incompetente. É porque o Firefox foi longe demais e desconsidera completamente a experiência de outros navegadores. Todos os navegadores, exceto o Firefox, podem usar o evento MouseWheel para lidar com a resposta da roda do mouse. No entanto, o Firefox não suporta MouseWheel e usa o absurdo DOMMouseScroll, que não é compatível com outros navegadores, exceto o Firefox. Em outras palavras, para lidar com eventos de roda do mouse, o Firefox só pode usar DOMMouseScroll. Quem não é Firefox só pode usar o MouseWheel. Os princípios destes dois eventos são diferentes e os dados que eles processam também são diferentes.

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

Vamos dar uma olhada no código completo

1. <!DOCTYPEhtml>
2. <estilo>
3. span{fonte:14px/20pxMicrosoft Yahei;}
4. #contador{
5. largura:50px;altura:20px;
6. borda:1pxsolid#CCC;
7. plano de fundo:#F9F9F9;
8. fonte:14px/20pxConsolas;
9. alinhamento de texto:centro;
10. margem:10px;
11. }
12. </estilo>
13. <span>Use a roda do mouse para ajustar o valor</span><br/>
14. <divid=contador>0</div>
15. <roteiro>
16. //Julgue o navegador
17. varisIE=navigator.userAgent.match(/MSIE(/d)/i);
18. isIE=isIE?isIE[1]:indefinido;
19. varisFF=/FireFox/i.test(navigator.userAgent);
20. //Obter elementos
21. varcounter=document.getElementById(contador);
22. //Evento de roda do mouse
23. if(isIE<9)//Navegadores tradicionais usam o evento MouseWheel
24. contador.attachEvent(onmousewheel,function(){
25. //Calcula a distância que a roda do mouse percorre
26. //Uma grade tem 3 linhas, cada linha tem 40 pixels, então divida por 120
27. varv=event.wheelDelta/120;
28. contador.innerHTML=contador.innerHTML*1+v;
29. //Bloquear método padrão do navegador
30. retorno falso;
31. });
32. elseif(!isFF)//Navegadores modernos, exceto Firefox, também usam o evento MouseWheel
33. contador.addEventListener(roda do mouse,função(e){
34. //Calcula a distância que a roda do mouse percorre
35. varv=e.wheelDelta/120;
36. contador.innerHTML=contador.innerHTML*1+v;
37. //Bloquear método padrão do navegador
38. e.preventDefault();
39. },falso);
40. else //O estranho Firefox usa o evento DOMMouseScroll
41. contador.addEventListener(DOMMouseScroll,função(e){
42. //Calcula a distância que a roda do mouse percorre
43. //Uma grade tem 3 linhas, mas observe que a diferença aqui em relação aos pixels é que é um valor negativo
44. varv=-e.detail/3;
45. contador.innerHTML=contador.innerHTML*1+v;
46. //Bloquear método padrão do navegador
47. e.preventDefault();
48. },falso);
49. </script>

O texto acima é todo o conteúdo deste artigo, espero que todos gostem.