Comment utiliser l'événement de roue de souris dans des pages HTML5

Cet article explore comment améliorer les pages Web HTML5 avec interactivité des roues de souris, allant au-delà du défilement de la page standard pour permettre des actions comme le zoom. Le défi de base réside dans la compatibilité entre les navigateurs, en particulier avec l'utilisation par Firefox de l'événement DOMMouseScroll au lieu de l'événement mousewheel le plus courant.

illustrons avec un exemple de zoom d'une image:

Tout d'abord, ajoutez une image à votre HTML:

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174067598031395.jpg"  class="lazy" alt="How to Use the Mouse Wheel Event in HTML5 Pages " />

Ensuite, ajoutez une fonction JavaScript pour gérer l'événement de la roue de la souris:

function MouseWheelHandler(e) {
  // Cross-browser wheel delta
  var e = window.event || e; // IE support
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

  // Adjust image size (adjust min/max as needed)
  var myimage = document.getElementById("myimage");
  myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";

  return false; // Prevent default scrolling
}

Enfin, joignez le gestionnaire d'événements, comptant les différences de navigateur:

var myimage = document.getElementById("myimage");
if (myimage.addEventListener) {
  myimage.addEventListener("mousewheel", MouseWheelHandler, false);
  myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else {
  myimage.attachEvent("onmousewheel", MouseWheelHandler);
}

Ce code ajuste dynamiquement la largeur d'image en fonction de la direction de la roue de la souris. Les fonctions Math.max et Math.min garantissent que la largeur reste dans une plage définie (50px à 800px dans ce cas). L'instruction return false empêche le comportement de défilement de la page par défaut. Bien que cette approche fonctionne à travers les principaux navigateurs, y compris les anciennes versions d'Internet Explorer, la gestion de Safari de la roue de défilement peut nécessiter d'autres ajustements en fonction de la version WebKit spécifique.

Questions fréquemment posées (FAQ):

Les FAQ suivantes répondent aux questions courantes sur l'utilisation de JavaScript pour détecter et gérer les événements de la roue de la souris:

• Détection des événements de roue de souris: Utilisez l'événement standard wheel pour les navigateurs modernes. Le code plus ancien peut utiliser mousewheel (ie) ou DOMMouseScroll (Firefox), mais wheel offre la meilleure compatibilité cross-browser.

• wheel vs mousewheel: wheel est la méthode standard et préférée. mousewheel est hérité et moins fiable.

• Déterminer la direction du défilement: La propriété deltaY de l'événement wheel indique une direction de défilement vertical (positif pour le bas, négatif pour UP). deltaX fournit des informations de défilement horizontal.

• Empêcher l'action par défaut: Utiliser event.preventDefault() pour arrêter le comportement de défilement par défaut et implémenter des actions personnalisées.

• défilement horizontal: Utiliser deltaX pour détecter le défilement horizontal.

• deltaMode Propriété: Cette propriété spécifie les unités de deltaX et deltaY (pixels, lignes ou pages). C'est généralement 0 (pixels).

• Prise en charge des périphériques mobiles: Les événements de roue de souris ne sont pas directement applicables aux appareils mobiles. Les événements tactiles doivent être utilisés à la place.

• Compatibilité Firefox: Firefox prend en charge l'événement standard wheel.

• JQUERY Prise en charge: La méthode .on('wheel', ...) de jQuery simplifie la manipulation des événements.

• Simulation des événements de roue de souris: Utiliser new WheelEvent('wheel', {deltaY: ...}) et dispatchEvent() à des fins de test.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!