Wir haben alle diese Effekte gesehen, wobei das Mausrad verwendet wird, um die Erhöhung oder Abnahme der Anzahl in einer bestimmten Form zu erreichen, oder das Bildlaufrad steuert die linke und rechte Taste und scrollt nach oben und unten. Diese werden alle durch JS -Ereignisüberwachung des Mausrads erreicht. Heute werde ich ein wenig einfaches JS -Hören für Mausradveranstaltungen vorstellen.
Verschiedene Ereignisse in verschiedenen Browsern
Erstens haben verschiedene Browser unterschiedliche Schriftrollenereignisse. Es gibt hauptsächlich zwei Arten: Onmousewheel (Firefox unterstützt nicht) und DommouSeScroll (nur Firefox -Stütze). Ich werde diese beiden Ereignisse hier nicht im Detail erklären. Wenn Sie wissen möchten, bewegen Sie sich bitte: Mausrad (Mausrad) und DommouSeScroll -Ereignisse.
Darüber hinaus muss das Ereignishörer während des Betriebs hinzugefügt werden. Der Code ist wie folgt: kompatibel mit Firefox, verwenden
Kopieren Sie den Code wie folgt:/*Registerereignis*/
if (document.addeventListener) {
document.adDeVentListener ('DommouSeScroll', ScrollFunc, False);
} // w3c
window.onmousewheel = document.onmousewheel = scrollfunc; // IE/Opera/Chrome
JS Return Numerical Wert, um das Auf und Ab des Bildlaufrads zu bestimmen
Die Kompatibilität sollte auch im Browser berücksichtigt werden, wenn festgestellt wird, ob das Bildlaufrad auf oder ab ist. Jetzt verwendet Firefox Details in den fünf großen Browsern (dh Opera, Safari, Firefox, Chrome) und den anderen vier Kategorien verwenden Wheeldelta. Die beiden sind in Bezug auf Werte nur inkonsistent, was bedeutet, dass die Bedeutung konsistent ist. Details und Wheeldelta nehmen nur zwei Werte auf, detailliert detailliert nur ± 3, Wheeldelta dauert nur ± 120, wobei positive Zahlen als Up und negative Zahlen als Down dargestellt werden.
Der spezifische Code lautet wie folgt:
Die Codekopie lautet wie folgt:
<Label für = "WheelDelta"> Scroll Value: </label> (IE/Opera) <Eingabe type = "text" id = "Wheeldelta"/>
<Label für = "Detail"> Scroll -Wert: (Firefox) </Label> <Eingabe type = "text" id = "detail"/>
<script type = "text/javaScript">
var scrollfunc = Funktion (e) {
e = e || Fenster.Event;
var t1 = document.getElementById ("Wheeldelta");
var t2 = document.getElementById ("Detail");
if (e.wheeldelta) {// IE/Opera/Chrome
t1.Value = e.Wheeldelta;
} else if (e.Detail) {// Firefox
t2.Value = E.Detail;
}
}
/*Ereignis registrieren*/
if (document.addeventListener) {
document.adDeVentListener ('DommouSeScroll', ScrollFunc, False);
} // w3c
window.onmousewheel = document.onmousewheel = scrollfunc; // IE/Opera/Chrome
</script>
Durch Ausführen des oben genannten Code können wir sehen:
Die Codekopie lautet wie folgt:
In Nicht -Firefox -Browsern beträgt der Wert, der vom Bildlaufrad -Scrollen nach oben zurückgegeben wird
Im Firefox -Browser beträgt der Wert, der vom Bildlaufrad -Scrollen nach oben zurückgegeben wird, -3 und der Wert, der vom Scrollen nach unten zurückgegeben wird.
Der Code-Teil lautet wie folgt: E.Wheeldelta bestimmt, ob es sich um einen Nicht-Firefox-Browser handelt, und 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;
}
PS: Hier empfehle ich ein Online -Query -Tool zu JS -Ereignissen, das die häufig verwendeten Ereignisarten und Funktionsfunktionen von JS zusammenfasst:
Eine vollständige Liste von JavaScript -Ereignissen und -Funktionen:
http://tools.vevb.com/table/javascript_event