Element : évènement mouseleave

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilité complète

L'évènement mouseleave est déclenché sur un objet Element lorsqu'un dispositif de pointage (généralement une souris) est déplacé de sorte que son point chaud se trouve à l'extérieur de l'élément.

mouseleave et mouseout sont similaires mais diffèrent en ce que mouseleave ne se propage pas et que mouseout oui. Cela signifie que mouseleave est déclenché lorsque le pointeur a quitté l'élément et tous ses descendants, tandis que mouseout est déclenché lorsque le pointeur quitte l'élément ou quitte l'un des descendants de l'élément, en raison de la propagation (même si le pointeur est toujours à l'intérieur de l'élément). À part cela, les évènements de sortie et de sortie pour la même situation sont déclenchés en même temps, si nécessaire.

Les évènements mouseleave et mouseout ne sont pas déclenchés lorsque l'élément est remplacé ou supprimé du DOM.

Notez que « se déplacer en dehors d'un élément » fait référence à la position de l'élément dans l'arborescence DOM, et non à sa position visuelle. Par exemple, si deux éléments voisins sont positionnés de manière à ce que l'un soit placé à l'intérieur de l'autre, alors se déplacer de l'élément extérieur vers l'élément intérieur déclenche mouseleave sur l'élément extérieur, même si le pointeur est toujours à l'intérieur des limites de l'élément extérieur.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènement.

addEventListener("mouseleave", (event) => { })

onmouseleave = (event) => { }

HTML

html

<div id="cibleSouris">
  <ul id="listeNonOrdonnee">
    <li>Pas d'évènements pour le moment !</li>
  </ul>
</div>

CSS

Mise en forme du <div> pour le rendre plus visible.

css

#cibleSouris {
  box-sizing: border-box;
  width: 15rem;
  border: 1px solid #333333;
}

JavaScript

let compteEventEntree = 0;
let compteEventSortie = 0;
const cibleSouris = document.getElementById("cibleSouris");
const listeNonOrdonnee = document.getElementById("listeNonOrdonnee");

cibleSouris.addEventListener("mouseenter", (e) => {
  cibleSouris.style.border = "5px dotted orange";
  compteEventEntree++;
  ajouterDansListe(
    `Ceci est l'évènement mouseenter numéro ${compteEventEntree}.`,
  );
});

cibleSouris.addEventListener("mouseleave", (e) => {
  cibleSouris.style.border = "1px solid #333333";
  compteEventSortie++;
  ajouterDansListe(
    `Ceci est l'évènement mouseleave numéro ${compteEventSortie}.`,
  );
});

function ajouterDansListe(texte) {
  // Crée un nouveau nœud de texte utilisant le texte fournit
  const nouveauNoeudTexte = document.createTextNode(texte);

  // Crée un nouvel élément li
  const nouvelElementListe = document.createElement("li");

  // Ajoute le nœud de texte à l'élément li
  nouvelElementListe.appendChild(nouveauNoeudTexte);

  // Ajoute l'élément de liste nouvellement créé à la liste
  listeNonOrdonnee.appendChild(nouvelElementListe);
}