Nous avons tous vu ces effets, en utilisant la roue de la souris pour atteindre l'augmentation ou la diminution du nombre sous une certaine forme, ou la roue de défilement contrôle la gauche et la droite d'un bouton et fait défiler vers le haut et vers le bas. Ceux-ci sont tous réalisés grâce à la surveillance des événements de JS de la roue de la souris. Aujourd'hui, je présenterai un petit JS simple écoutant les événements de roue de souris.
Différents événements dans différents navigateurs
Tout d'abord, différents navigateurs ont différents événements de défilement. Il existe principalement deux types: OnMouse-Wheel (Firefox ne prend pas en charge) et DOMMOUSESCROLL (seuls Firefox supporte). Je n'expliquerai pas ces deux événements en détail ici. Si vous voulez savoir, veuillez déménager: les événements de la roue de souris (roue de souris) et de Domoussescroll.
De plus, l'écoute des événements doit être ajoutée pendant le fonctionnement, le code est le suivant: Compatible avec Firefox, utilisez AddeveventListener pour écouter
Copiez le code comme suit: / * Enregistrer l'événement * /
if (document.addeventListener) {
Document.AddeventListener («Dommesescroll», ScrollFunc, false);
} // w3c
window.onmousewheel = document.onmousewheel = scrollfunc; // ie / opéra / chrome
JS retourne la valeur numérique pour déterminer le haut et le bas de la roue de défilement
La compatibilité doit également être envisagée dans le navigateur lors de la détermination de la question de savoir si la roue de défilement est vers le haut ou vers le bas. Maintenant, Firefox utilise des détails dans les cinq principaux navigateurs (c.-à-d. Opéra, Safari, Firefox, Chrome) et les quatre autres catégories utilisent Wheeldelta; Les deux ne sont qu'incohérents en termes de valeurs, ce qui signifie que le sens est cohérent. Le détail et Wheeldelta ne prennent que deux valeurs chacun, le détail ne prend que ± 3, Wheeldelta ne prend que ± 120, où les nombres positifs sont représentés comme des nombres et négatifs sont représentés comme en bas.
Le code spécifique est le suivant:
La copie de code est la suivante:
<étiquette pour = "WheelDelta"> Valeur de défilement: </bétique> (IE / Opera) <Type d'entrée = "Text" id = "Wheeldelta" />
<étiquette pour = "Detail"> Valeur de défilement: (Firefox) </ Label> <Input Type = "Text" id = "Detail" />
<script type = "text / javascript">
var scrollfunc = fonction (e) {
E = E || window.event;
var t1 = document.getElementById ("Wheeldelta");
var t2 = document.getElementById ("détail");
if (e.wheeldelta) {// ie / opéra / chrome
t1.value = e.wheeldelta;
} else if (e.detail) {// firefox
t2.Value = E.Detail;
}
}
/ * Enregistrer l'événement * /
if (document.addeventListener) {
Document.AddeventListener («Dommesescroll», ScrollFunc, false);
} // w3c
window.onmousewheel = document.onmousewheel = scrollfunc; // ie / opéra / chrome
</cript>
En exécutant le code ci-dessus, nous pouvons voir:
La copie de code est la suivante:
Dans les navigateurs non-Firefox, la valeur renvoyée par le défilement de la roue de défilement vers le haut est de 120, et la valeur renvoyée par le défilement vers le bas est de -120
Dans le navigateur Firefox, la valeur renvoyée par le défilement de la roue de défilement vers le haut est de -3 et la valeur renvoyée par le défilement vers le bas est de 3.
La partie de code est la suivante: E.Wheeldelta détermine s'il s'agit d'un navigateur non-Firefox, et E.Detail est un navigateur Firefox
if (e.wheeldelta) {// ie / opéra / chrome
t1.value = e.wheeldelta;
} else if (e.detail) {// firefox
t2.Value = E.Detail;
}
PS: Ici, je recommande un outil de requête en ligne sur les événements JS, qui résume les types d'événements couramment utilisés et les fonctions de fonction de JS:
Une liste complète des événements et fonctions JavaScript:
http://tools.vevb.com/table/javascript_event