Introduction de l'article de wulin.com (www.vevb.com): Comment HTML5 utilise-t-il des événements de roue de souris?
L'ajout d'événements de roues de souris aux pages Web HTML5 peut mieux permettre aux utilisateurs d'interagir avec les pages Web. Dans HTML5, la roue de défilement de la souris ne peut pas seulement glisser de haut en bas de la page Web. En fait, vous pouvez également compter sur cela pour remplir plus de fonctions, telles que l'agrandissement et la réduction du champ de vision du champ.
La plupart des navigateurs prennent en charge les événements de roue de souris, vous pouvez donc d'abord vous abonner à la méthode des événements de roue de souris. Chaque fois que l'événement est déclenché, vous pouvez obtenir une propriété appelée Wheeldelta, qui représente la taille de la roue de la souris qui vient de changer. Une valeur positive indique que la roue de défilement glisse vers le bas et une valeur négative indique que la roue de défilement glisse vers le haut. Plus la valeur absolue de la valeur est grande, plus la plage de glissement.
Malheureusement, il y a encore un navigateur qui ne prend pas en charge les événements de roue de souris. C'est Firefox. Mozilla a implémenté le traitement d'un événement appelé DomMousescroll, qui passera un paramètre d'événement nommé événement avec une propriété appelée Detail. Cependant, cette propriété détaillée est différente de Wheeldelta, qui ne peut renvoyer que des valeurs positives, c'est-à-dire qu'elle ne peut qu'insister sur la valeur de la roue de la souris à la baisse.
Vous devez prêter une attention particulière qu'Apple a également désactivé le défilement de la souris pour contrôler la page qui glisse et vers le bas dans le navigateur Safari, mais cette fonction est toujours utilisée normalement dans le moteur WebKit, de sorte que le code que vous écrivez ne déclenchera aucun problème.
Ajouter la méthode de gestion des événements de roue de souris
Tout d'abord, nous ajoutons une image à la page Web, et nous pouvons utiliser la roue de la souris pour contrôler le zoom de cette image plus tard.
<img id = myimage src = myimage.jpg alt = mon image />
Ajoutez maintenant le code de traitement des événements de la roue de souris
var myImage = document.getElementById (MyImage);
if (myimage.addeventListener) {
// ie9, chrome, safari, opéra
MyImage.AddeventListener (MouseWheel, MousewheelHandler, False);
// Firefox
MyImage.AddeventListener (DOMMOUSESCROLL, MOUSEWHEELHANDLER, FAUX);
}
// IE 6/7/8
else MyImage.Attachevent (onMousewheel, souris-wheelhandler);
Pratiques de traitement qui peuvent être soutenues par différents navigateurs
Dans le cas suivant, nous inversons la valeur détaillée de Firefox et renvoie un des 1 ou -1
fonction souris-wheelhandler (e) {
// Delta de la roue de navigateur croisé
var e = window.event || e; // ANCIEN IE SUPPORT
var delta = math.max (-1, math.min (1, (e.wheeldelta || -e.detail)));
Maintenant, nous décidons directement de la plage de taille de l'image. Le code suivant définit la plage de largeur de l'image entre 50 et 800 pixels
myimage.style.width = math.max (50, math.min (800, myimage.width + (30 * delta))) + px;
retourne false;
}
Dernier point, nous retournons faux dans la méthode pour terminer le traitement standard des événements de roue de souris au cas où il glissent de haut en bas de la page Web.