Eine kurze Analyse der Javascript-Überwachung von Mausradereignissen_Javascript-Fähigkeiten-js-Tutorial-php.cn

Eine kurze Analyse der Javascript-Überwachung von Mausradereignissen_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:46:16

Original

1593 Leute haben es durchsucht

Wir haben alle diese Effekte gesehen. Verwenden Sie das Mausrad, um die Zahlen in einem Formular zu erhöhen oder zu verringern, oder verwenden Sie das Mausrad, um das Scrollen einer Schaltfläche nach links und rechts sowie nach oben und unten zu steuern. Diese werden alle durch die js-Ereignisüberwachung des Mausrads implementiert. Was wir heute hier vorstellen, ist eine einfache JS-Überwachung von Mausradereignissen.

Verschiedene Ereignisse in verschiedenen Browsern

Zuallererst haben verschiedene Browser unterschiedliche Scrollrad-Ereignisse. Es gibt hauptsächlich zwei Typen: onmousewheel (nicht von Firefox unterstützt) und DOMMouseScroll (nur von Firefox unterstützt). Ich werde hier nicht näher auf diese beiden Ereignisse eingehen. Freunde, die mehr darüber erfahren möchten, gehen bitte zu: Mousewheel (Mausrad). ) und DOMMouseScroll-Ereignisse.
Außerdem muss während des Vorgangs die Ereignisüberwachung hinzugefügt werden. Der Code lautet wie folgt: Kompatibel mit Firefox, verwenden Sie addEventListener zur Überwachung

Kopieren Sie den Code Der Code lautet wie folgt:

/*Ereignisse registrieren*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false) ;
}//W3C
window .onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

js gibt einen numerischen Wert zurück, um das Auf und Ab des Scrollrads zu beurteilen

Bei der Beurteilung, ob das Scrollrad oben oder unten ist, muss auch die Kompatibilität im Browser berücksichtigt werden. Derzeit verwendet Firefox unter den fünf wichtigsten Browsern (IE, Opera, Safari, Firefox, Chrome) Details und die anderen vier Typen verwenden nur WheelDelta. Die Werte sind inkonsistent, was bedeutet, dass Detail und WheelDelta jeweils nur zwei Werte annehmen, Detail nur ±3 und WheelDelta nur ±120 Positive Zahlen stehen für Aufwärts und negative Zahlen für Abwärts.
Der spezifische Code lautet wie folgt:

Code kopierenDer Code lautet wie folgt:

< label for="wheelDelta">Scrollwert:(IE/Opera)
Scroll-Wert: (Firefox)

Durch Ausführen des obigen Codes können wir Folgendes sehen:

Code kopieren Der Code lautet wie folgt:

In Nicht-Firefox-Browsern das Scrollrad Beim Scrollen nach oben wird der Wert 120 zurückgegeben, beim Scrollen nach unten wird -120 zurückgegeben

 Im Firefox-Browser wird beim Scrollen mit dem Rad nach oben der Wert -3 zurückgegeben, beim Scrollen nach unten wird der Wert 3 zurückgegeben
Der Codeteil lautet wie folgt, z .wheelDelta wird verwendet, um zu bestimmen, ob es sich um einen Nicht-Firefox-Browser handelt, e.detail ist ein Firefox-Browser
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail) {//Firefox
t2.value=e.detail;
}