Element : évènement mouseleave

L'évènement mouseleave est déclenché à partir d'un Element lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.

Se propage/remonte dans le DOM Non
Annulable Non
Interface MouseEvent
Propriété pour la gestion d'évènement onmouseleave (en-US)

mouseleave et mouseout (en-US) se ressemblent mais mouseleave ne remonte pas dans le DOM tandis que mouseout remonte. mouseleave est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que mouseout est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).

mouseenter.png
Un évènement mouseleave est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <div> le plus haut dans la hiérarchie.
mouseover.png
Un seul évènement mouseout est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.

Exemples

Voir la documentation de mouseout pour un exemple sur les différences entre mouseout et mouseleave.

Ici, on utilise l'évènement mouseenter pour modifier la bordure d'un élément div lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements mouseenter et mouseleave.

HTML

<div id='mouseTarget'>
 <ul id="unorderedList">
  <li>Pas encore d'évènement !</li>
 </ul>
</div>

CSS

On met le div en forme afin de le rendre plus visible.

#mouseTarget {
  box-sizing: border-box;
  width:15rem;
  border:1px solid #333;
}

JavaScript

var enterEventCount = 0;
var leaveEventCount = 0;
const mouseTarget = document.getElementById('mouseTarget');
const unorderedList = document.getElementById('unorderedList');

mouseTarget.addEventListener('mouseenter', e => {
  mouseTarget.style.border = '5px dotted orange';
  enterEventCount++;
  addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
});

mouseTarget.addEventListener('mouseleave', e => {
  mouseTarget.style.border = '1px solid #333';
  leaveEventCount++;
  addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + ".");
});

function addListItem(text) {
  //  On crée un noeud texte avec le texte passé en argument
  var newTextNode = document.createTextNode(text);

  // On crée un nouvel élément li
  var newListItem = document.createElement("li");

  // On ajoute le noeud texte à l'élément li
  newListItem.appendChild(newTextNode);

  // On ajoute le nouvel élément à la liste
  unorderedList.appendChild(newListItem);
}

Résultat

Spécifications

Spécification État
UI Events
La définition de 'mouseleave' dans cette spécification.
Version de travail
Document Object Model (DOM) Level 3 Events Specification
La définition de 'mouseleave' dans cette spécification.
Obsolete

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi