Startseite>Tutorial zur Netzwerkprogrammierung>ASP-Tutorial

JavaScript implementiert die Deaktivierung von Mausradereignissen

Autor：Eve Cole Aktualisierungszeit：2025-01-13 10:24:01

In diesem Artikel werden hauptsächlich relevante Informationen zum Deaktivieren von Mausradereignissen in JavaScript vorgestellt. Freunde in Not können darauf zurückgreifen.

Normalerweise passen wir die Kompatibilität niedrigerer IE-Versionen an, wenn es um kompatible Dinge geht, aber dieses Mal liegt es nicht daran, dass die niedrigere Version des Browsers inkompetent ist. Das liegt daran, dass Firefox zu weit gegangen ist und die Erfahrungen anderer Browser völlig außer Acht gelassen hat. Alle Browser außer Firefox können das MouseWheel-Ereignis verwenden, um die Reaktion des Mausrads zu verarbeiten. Allerdings unterstützt Firefox MouseWheel nicht und verwendet das unsinnige DOMMouseScroll, das mit anderen Browsern außer Firefox nicht kompatibel ist. Mit anderen Worten: Für die Verarbeitung von Mausradereignissen kann Firefox nur DOMMouseScroll verwenden. Nicht-Firefox kann nur MouseWheel verwenden. Die Prinzipien dieser beiden Ereignisse sind unterschiedlich und auch die von ihnen verarbeiteten Daten sind unterschiedlich.

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

Werfen wir einen Blick auf den vollständigen Code

  1. <!DOCTYPEhtml>
  2. <Stil>
  3. span{font:14px/20pxMicrosoft Yahei;}
  4. #Schalter{
  5. Breite:50px;Höhe:20px;
  6. border:1pxsolid#CCC;
  7. Hintergrund:#F9F9F9;
  8. Schriftart: 14px/20pxConsolas;
  9. text-align:center;
  10. Rand: 10 Pixel;
  11. }
  12. </style>
  13. <span>Verwenden Sie das Mausrad, um den Wert anzupassen</span><br/>
  14. <divid=counter>0</div>
  15. <Skript>
  16. //Beurteilen Sie den Browser
  17. varisIE=navigator.userAgent.match(/MSIE(/d)/i);
  18. isIE=isIE?isIE[1]:undefiniert;
  19. varisFF=/FireFox/i.test(navigator.userAgent);
  20. //Elemente abrufen
  21. varcounter=document.getElementById(counter);
  22. //Mausrad-Ereignis
  23. if(isIE<9)//Herkömmliche Browser verwenden das MouseWheel-Ereignis
  24. counter.attachEvent(onmousewheel,function(){
  25. //Berechnen Sie die Entfernung, um die das Mausrad scrollt
  26. //Ein Raster hat 3 Zeilen, jede Zeile hat 40 Pixel, also dividiere durch 120
  27. varv=event.wheelDelta/120;
  28. counter.innerHTML=counter.innerHTML*1+v;
  29. //Standardmethode des Browsers blockieren
  30. returnfalse;
  31. });
  32. elseif(!isFF)//Moderne Browser außer Firefox verwenden auch das MouseWheel-Ereignis
  33. counter.addEventListener(mousewheel,function(e){
  34. //Berechnen Sie die Entfernung, um die das Mausrad scrollt
  35. varv=e.wheelDelta/120;
  36. counter.innerHTML=counter.innerHTML*1+v;
  37. //Standardmethode des Browsers blockieren
  38. e.preventDefault();
  39. },FALSCH);
  40. else//Der seltsame Firefox verwendet das DOMMouseScroll-Ereignis
  41. counter.addEventListener(DOMMouseScroll,function(e){
  42. //Berechnen Sie die Entfernung, um die das Mausrad scrollt
  43. //Ein Raster besteht aus 3 Zeilen, aber bitte beachten Sie, dass der Unterschied zu Pixeln hier darin besteht, dass es sich um einen negativen Wert handelt
  44. varv=-e.detail/3;
  45. counter.innerHTML=counter.innerHTML*1+v;
  46. //Standardmethode des Browsers blockieren
  47. e.preventDefault();
  48. },FALSCH);
  49. </script>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Ähnliche Artikel