Une brève analyse des compétences de la molette de la souris de surveillance Javascript events

Une brève analyse des compétences de la molette de la souris de surveillance Javascript events_javascript

WBOY

Libérer： 2016-05-16 16:46:16

original

1589 Les gens l'ont consulté

Nous avons tous vu ces effets. Utilisez la molette de la souris pour augmenter ou diminuer les nombres dans un formulaire, ou utilisez la molette de la souris pour contrôler le défilement vers la gauche, la droite, le haut et le bas d'un bouton. Tout cela est implémenté via la surveillance des événements js de la molette de la souris. Ce que nous présentons ici aujourd'hui est une simple surveillance js des événements de la molette de la souris.

Différents événements dans différents navigateurs

Tout d'abord, différents navigateurs ont des événements de molette de défilement différents. Il en existe principalement deux types, onmousewheel (non pris en charge par Firefox) et DOMMouseScroll (uniquement pris en charge par Firefox). Je n'entrerai pas dans les détails de ces deux événements ici. Amis qui souhaitent en savoir plus, rendez-vous sur : mousewheel (mousewheel). ) et les événements DOMMouseScroll.
De plus, l'écoute des événements doit être ajoutée pendant l'opération. Le code est le suivant : Compatible avec Firefox, utilisez addEventListener pour surveiller

Copiez le code Le code est le suivant :

/*Enregistrer les événements*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false) ;
}//W3C
fenêtre .onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

js renvoie une valeur numérique pour juger du haut et du bas de la molette de défilement

Pour juger si la molette de défilement est vers le haut ou vers le bas, la compatibilité doit également être prise en compte dans le navigateur. Actuellement, parmi les cinq principaux navigateurs (IE, Opera, Safari, Firefox, Chrome), Firefox utilise le détail et les quatre autres. les types utilisent wheelDelta ; les deux utilisent uniquement wheelDelta. Les valeurs sont incohérentes, ce qui signifie que la signification est cohérente et wheelDelta ne prend que deux valeurs chacune, le détail ne prend que ±3 et wheelDelta ne prend que ±120. les nombres positifs représentent la hausse et les nombres négatifs représentent la baisse.
Le code spécifique est le suivant :

Copier le code Le code est le suivant :

< label for="wheelDelta">Valeur de défilement :(IE/Opera)
Valeur de défilement : (Firefox)

En exécutant le code ci-dessus, nous pouvons voir :

Copier le code Le code est le suivant :

Dans les navigateurs non-Firefox, la molette de défilement renvoie lors du défilement vers le haut La valeur est 120, et le défilement vers le bas renvoie -120
 Dans le navigateur Firefox, faire défiler la molette vers le haut renvoie une valeur de -3, faire défiler vers le bas renvoie 3
La partie du code est la suivante, e. .wheelDelta est utilisé pour déterminer s'il s'agit d'un navigateur non Firefox, e.detail est un navigateur Firefox
if(e.wheelDelta){//IE/Opera/Chrome
t1.value=e.wheelDelta;
}else if(e.detail) {//Firefox
t2.value=e.detail;
}