Les bases des événements de souris en JavaScript

Introduction

En JavaScript, les événements de souris permettent à votre page de réagir à ce que l'utilisateur fait avec son pointeur : cliquer sur un bouton, survoler un lien, faire glisser un élément ou faire un clic droit pour ouvrir un menu. Connecter des scripts à ces événements est ce qui transforme un document statique en interface interactive.

Ce guide couvre l'ensemble des événements de souris de base, les données disponibles dans l'objet événement (quel bouton, où se trouve le pointeur), la différence importante entre mouseover et mouseenter, ainsi que plusieurs exemples interactifs — un interrupteur de couleur, un menu contextuel personnalisé, un canvas de dessin et le glisser-déposer. Les événements de souris font partie de la grande famille des événements du navigateur ; si vous débutez avec les gestionnaires d'événements, lisez d'abord La gestion des événements dans le DOM.

Comprendre les événements de souris en JavaScript

Un événement de souris est un signal que le navigateur déclenche lorsqu'un utilisateur interagit avec la page à l'aide d'un dispositif de pointage. Vous y répondez en enregistrant un écouteur avec addEventListener('eventName', handler). Le gestionnaire reçoit un objet MouseEvent décrivant ce qui s'est passé.

Principaux événements de souris

Un click complet correspond en réalité à trois événements dans l'ordre : mousedown → mouseup → click. Connaître cette séquence aide lorsqu'un événement semble en « avaler » un autre.

Lire l'objet MouseEvent

Chaque gestionnaire de souris reçoit un objet événement avec des propriétés utiles :

• event.clientX / event.clientY — position du pointeur par rapport au viewport (la fenêtre visible).
• event.pageX / event.pageY — position par rapport à l'ensemble du document, défilement inclus.
• event.offsetX / event.offsetY — position par rapport à la boîte de l'élément cible lui-même.
• event.button — quel bouton : 0 = gauche, 1 = milieu, 2 = droit.
• event.ctrlKey / event.shiftKey / event.altKey / event.metaKey — true si cette touche modificatrice était maintenue pendant l'événement.
• event.target — l'élément sur lequel le pointeur se trouvait réellement.

Choisir la bonne coordonnée est important : utilisez clientX/clientY pour positionner quelque chose de fixe dans la fenêtre, pageX/pageY pour positionner quelque chose dans du contenu défilant, et offsetX/offsetY (ou soustrayez getBoundingClientRect()) pour dessiner à l'intérieur d'un élément spécifique comme un canvas.

Implémenter des gestionnaires d'événements de souris de base

Exemple : créer un bouton cliquable

Imaginez un bouton qui change de couleur à chaque clic. Cette interaction simple peut être implémentée à l'aide de l'événement click.

<div>
    <button id="colorButton">Click me to change color</button>
</div>
<script>
    document.getElementById('colorButton').addEventListener('click', function() {
        this.style.backgroundColor = this.style.backgroundColor === 'red' ? 'blue' : 'red';
    });
</script>

Dans cet exemple, chaque clic change la couleur de fond du bouton en alternant entre rouge et bleu. Cela améliore non seulement le retour visuel, mais familiarise aussi les utilisateurs avec les changements dynamiques via des interactions simples.

Interaction avancée : événement de double clic

Un événement de double clic peut être utilisé pour basculer la taille du texte, offrant une méthode rapide pour zoomer sur le contenu.

<div>
    <p id="text">Double-click me to toggle text size.</p>
</div>
<script>
    document.getElementById('text').addEventListener('dblclick', function() {
        this.style.fontSize = this.style.fontSize === '16px' ? '32px' : '16px';
    });
</script>

Ce script augmente la taille de la police au premier double clic et la réinitialise au suivant, ce qui en fait une fonctionnalité pratique pour améliorer la lisibilité.

mouseenter / mouseleave vs. mouseover / mouseout

C'est le piège le plus courant avec les événements de souris. mouseover/mouseout remontent dans le DOM : lorsque le pointeur entre dans un élément enfant, mouseout se déclenche sur le parent et mouseover se déclenche à nouveau — ainsi, un gestionnaire sur un conteneur avec des enfants se déclenche de façon répétée. mouseenter/mouseleave ne remontent pas dans le DOM et se déclenchent une seule fois lorsque le pointeur franchit la bordure extérieure de l'élément, sans tenir compte des déplacements entre les enfants.

Règle générale : pour un effet de survol simple sur un seul élément, préférez mouseenter/mouseleave. Utilisez mouseover/mouseout uniquement lorsque vous souhaitez délibérément détecter l'entrée dans les éléments enfants (par exemple avec la délégation d'événements).

Exemple : mise en évidence du texte au survol

<div>
  <p id="hoverText">Hover over me to highlight.</p>
</div>
<script>
  document.getElementById('hoverText').addEventListener('mouseenter', function() {
    this.style.color = 'green';
  });
  document.getElementById('hoverText').addEventListener('mouseleave', function() {
    this.style.color = 'black';
  });
</script>

Cet exemple améliore l'interaction utilisateur en changeant la couleur du texte en vert lorsque la souris le survole, et en la ramenant au noir lorsque la souris s'éloigne, illustrant l'utilisation de mouseenter et mouseleave.

Exploiter le mouvement de la souris

Exemple : afficher les coordonnées de la souris

Dans cet exemple, les coordonnées de la souris sont affichées en temps réel à mesure que l'utilisateur déplace la souris sur le texte. Cet usage de l'événement mousemove est idéal pour les applications qui nécessitent de suivre la position de la souris. Notez que mousemove peut se déclencher des dizaines de fois par seconde — gardez son gestionnaire léger et évitez les opérations DOM lourdes à l'intérieur.

<div>
    <p id="mousePosition" style="height: 100px; background-color: orangered">
 Hover here to track your mouse position!
</p>
</div>
<script>
    document.getElementById('mousePosition').addEventListener('mousemove', function(event) {
        this.textContent = `Mouse Position - X: ${event.clientX}, Y: ${event.clientY}`;
    });
</script>

Cet exemple affiche les coordonnées x et y du curseur de la souris au fur et à mesure de ses déplacements sur le texte, fournissant un retour en temps réel à l'utilisateur.

Applications avancées

Implémenter un menu contextuel personnalisé

Les menus contextuels personnalisés sont un excellent moyen d'améliorer la façon dont les utilisateurs interagissent avec les options du clic droit sur votre site. La clé est event.preventDefault() à l'intérieur du gestionnaire contextmenu, qui empêche le menu intégré du navigateur de s'afficher afin que le vôtre puisse le remplacer.

<div>
<p>Right Click anywhere to see a customized context menu other than the default one in the browser!</p>
</div>
<div>
    <div id="contextMenu" style="display:none; position:absolute; background-color:white; border:1px solid black; padding:10px;">
        <ul>
            <li>Refresh</li>
            <li>Save Page</li>
            <li>Search</li>
        </ul>
    </div>
</div>
<script>
    document.addEventListener('contextmenu', function(event) {
        event.preventDefault();
        let menu = document.getElementById('contextMenu');
        menu.style.display = 'block';
        menu.style.left = `${event.clientX}px`;
        menu.style.top = `${event.clientY}px`;
    });

    document.addEventListener('click', function(event) {
        const menu = document.getElementById('contextMenu');
        if (!menu.contains(event.target)) {
            menu.style.display = 'none';
        }
    });
</script>

Ce code JavaScript fait deux choses principales :

1. Lors d'un clic droit :
   • Il empêche l'affichage du menu contextuel normal (event.preventDefault()).
   • Il affiche un menu personnalisé à l'endroit du clic droit, positionné avec event.clientX/event.clientY.
2. Lors d'un clic n'importe où :
   • Il masque le menu personnalisé pour qu'il ne reste pas à l'écran.

Créer des graphiques interactifs avec HTML Canvas

Cette application de dessin interactive permet aux utilisateurs de dessiner sur un canvas avec leur souris. L'événement mousemove suit le mouvement de la souris pour tracer des lignes, idéal pour les applications graphiques simples ou les jeux.

Exemple : application de dessin simple

<div>
<p>Start drawing in the box below and see the result!</p>
</div>
<div>
  <canvas id="drawingCanvas" width="400" height="300" style="border:1px solid #000;"></canvas>
</div>
<script>
  const canvas = document.getElementById('drawingCanvas');
  const ctx = canvas.getContext('2d');
  let drawing = false;

  canvas.addEventListener('mousedown', () => {
    drawing = true;
    ctx.beginPath();
  });
  canvas.addEventListener('mouseup', () => drawing = false);
  canvas.addEventListener('mouseout', () => drawing = false);
  canvas.addEventListener('mousemove', function(event) {
    if (drawing) {
      const rect = canvas.getBoundingClientRect();
      ctx.lineTo(event.clientX - rect.left, event.clientY - rect.top);
      ctx.stroke();
    }
  });
</script>

Ce code met en place une zone de dessin sur une page web à l'aide d'un élément <canvas> :

• JavaScript pour le dessin :
  • Il commence par récupérer le canvas et son contexte de dessin, utilisé pour tracer.
  • Le dessin commence lorsque vous appuyez sur le bouton de la souris sur le canvas et s'arrête lorsque vous le relâchez ou déplacez la souris hors du canvas.
  • En déplaçant la souris sur le canvas avec le bouton maintenu, il trace des lignes suivant le curseur de la souris.

Implémenter des fonctionnalités de glisser-déposer

Le modèle classique utilise trois événements : mousedown sur l'élément pour commencer le glissement, mousemove sur le document pour suivre le pointeur (écouter sur le document plutôt que sur l'élément signifie que le glissement continue même si le pointeur se déplace plus vite que la boîte), et mouseup pour arrêter.

<div>
<div id="draggable" style="width: 100px; height: 100px; background: blue; position: absolute; color: white; padding: 10px">    Drag me!
  </div>
</div>
<script>
  const draggable = document.getElementById('draggable');
  let active = false;
  let currentX;
  let currentY;
  let initialX;
  let initialY;

  draggable.addEventListener('mousedown', function(event) {
    active = true;
    const rect = draggable.getBoundingClientRect();
    initialX = event.clientX - rect.left;
    initialY = event.clientY - rect.top;
  });

  document.addEventListener('mouseup', function() {
    active = false;
  });

  document.addEventListener('mousemove', function(event) {
    if (active) {
      currentX = event.clientX - initialX;
      currentY = event.clientY - initialY;
      draggable.style.left = currentX + 'px';
      draggable.style.top = currentY + 'px';
    }
  });
</script>

Ce code crée un carré bleu glissable simple sur une page web :

• JavaScript pour le glissement :
  • Le carré peut être déplacé en cliquant et en maintenant le bouton de la souris dessus. Lorsque vous appuyez sur le bouton de la souris (mousedown), il enregistre l'endroit où vous l'avez saisi et prépare le carré à se déplacer.
  • Lorsque vous relâchez le bouton de la souris (mouseup), le carré s'arrête de bouger.
  • En maintenant le bouton de la souris enfoncé et en déplaçant la souris (mousemove), le carré suit le pointeur à l'écran, se déplaçant partout où vous le faites glisser.

Améliorer l'utilisabilité des formulaires

Améliorer l'utilisabilité des formulaires en fournissant des éléments interactifs tels que des icônes d'aide peut grandement améliorer l'expérience utilisateur. Cet exemple montre une façon simple et efficace d'ajouter du texte d'aide dynamique aux champs de formulaire.

<div>
  <p style="font-weight: bold;">Hover your mouse on the icon!</p>
    <label for="password">Password:</label>
    <input type="password" id="password" />
    <span id="helpIcon" style="cursor: help;">&#9432;</span>
    <div id="helpText" style="display:none; margin-top: 10px;">Use 8 or more characters with a mix of letters, numbers & symbols.</div>
</div>
<script>
    document.getElementById('helpIcon').addEventListener('mouseover', function() {
        document.getElementById('helpText').style.display = 'block';
    });

    document.getElementById('helpIcon').addEventListener('mouseout', function() {
        document.getElementById('helpText').style.display = 'none';
    });
</script>

Ce code fournit une fonctionnalité d'aide pour un champ de saisie de mot de passe sur une page web :

• Champ de mot de passe et icône d'aide : il y a une étiquette, une entrée de mot de passe et une icône d'aide à côté du champ.
• JavaScript pour afficher le texte d'aide :
  • Lorsque vous passez votre souris sur l'icône (mouseover), un message caché juste en dessous apparaît avec des conseils pour créer un mot de passe fort.
  • Lorsque vous éloignez votre souris de l'icône (mouseout), le message disparaît.

Note sur l'accessibilité

Les événements de souris ne se déclenchent que pour les utilisateurs de pointeur. Les utilisateurs clavier, les utilisateurs de lecteurs d'écran et les appareils tactiles ne déclencheront pas les gestionnaires mouseover, mousemove ou de clic droit. Pour tout ce qui est important, associez les gestionnaires de souris à leurs équivalents accessibles :

• Ajoutez des écouteurs focus/blur en parallèle de mouseenter/mouseleave pour que l'effet fonctionne aussi lorsque l'élément est atteint par tabulation.
• Ajoutez keydown (Entrée/Espace) en parallèle de click pour les widgets personnalisés qui ne sont pas des boutons natifs.
• Ne cachez jamais du contenu essentiel derrière un survol seul.

Consultez Les considérations d'accessibilité du DOM pour une vue d'ensemble complète.

Conclusion

Les événements de souris JavaScript offrent un ensemble d'outils robustes pour créer des expériences web interactives — du simple click aux menus contextuels personnalisés, en passant par le dessin sur canvas et le glisser-déposer. Les clés pour bien les utiliser sont : choisir le bon événement (mouseenter vs mouseover), lire la bonne coordonnée (clientX vs pageX vs offsetX) dans l'objet événement, garder les gestionnaires mousemove légers, et toujours fournir une alternative accessible au clavier. Avec ces bonnes habitudes, les événements de souris deviennent une base fiable pour des interfaces engageantes.

Pratique