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

mouseleave et mouseout 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
mouseleave eventChrome Support complet 30Edge Support complet 12Firefox Support complet 10IE Support complet 5.5Opera Support complet 17Safari Support complet 6.1WebView Android Support complet ≤37Chrome Android Support complet 30Firefox Android Support complet 10Opera Android Support complet 18Safari iOS Support complet 6.1Samsung Internet Android Support complet 2.0

Légende

Support complet  
Support complet

Voir aussi