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` 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).

![](/fr/docs/Web/API/Element/mouseleave_event/mouseleave.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.

![](/fr/docs/Web/API/Element/mouseleave_event/mouseout.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


```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.


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

### JavaScript


```js
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
--------------

| Specification |
| --- |
| UI Events # event-type-mouseleave |
| HTML Standard # handler-onmouseleave |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Une introduction aux évènements
* D'autres évènements connexes
    + `mousedown`
    + `mouseup`
    + `mousemove`
    + `mouseover`
    + `click`
    + `dblclick`
    + `mouseout`
    + `mouseenter`
    + `contextmenu`