Element : évènement mouseout
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.
L'évènement mouseout est déclenché à partir d'un Element lorsqu'un dispositif de pointage (généralement une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils.
mouseout est également apporté à un élément si le curseur se déplace dans un élément fils, car l'élément fils peut masquer la zone visible de l'élément.
Si l'élément cible a des éléments fils, les évènements mouseout et mouseover sont déclenchés lorsque la souris passe sur les limites de ces éléments également, et pas seulement sur l'élément cible lui-même. En général, le comportement des évènements mouseenter et mouseleave est plus logique, car ils ne sont pas affectés par le déplacement dans les éléments fils.
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("mouseout", (event) => { })
onmouseout = (event) => { }
Type d'évènement
Un objet MouseEvent. Hérite de UIEvent et de Event.
Exemples
Les exemples suivants montrent l'utilisation de l'évènement mouseout.
mouseout et mouseleave
Dans l'exemple suivant, on illustre la différence entre les évènements mouseout et mouseleave. Ce dernier est ajouté à <ul> pour colorer la liste en violet lorsque la souris quitte <ul>. mouseout est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.
Lorsqu'on essaie cet exemple, on constate que mouseout est envoyé aux éléments individuels de la liste, tandis que mouseleave est géré sur la liste entière, en raison de la hiérarchie des éléments et du fait que les éléments de la liste masquent la liste sous-jacente.
HTML
<ul id="test">
<li>élément 1</li>
<li>élément 2</li>
<li>élément 3</li>
</ul>
JavaScript
const test = document.getElementById("test");
// On affiche la liste en violet lorsque le curseur quitte l'élément <ul>
test.addEventListener(
"mouseleave",
function (event) {
// on cible la cible de mouseleave
event.target.style.color = "purple";
// on réinitialise la couleur après quelques instants
setTimeout(function () {
event.target.style.color = "";
}, 1000);
},
false,
);
// On affiche les éléments <li> en orange lorsque la souris les quitte
test.addEventListener(
"mouseout",
function (event) {
// on cible la cible de mouseout
event.target.style.color = "orange";
// on réinitialise la couleur après quelques instants
setTimeout(function () {
event.target.style.color = "";
}, 500);
},
false,
);
Résultat
Spécifications
| Spécification |
|---|
| Pointer Events # mouseout |
| HTML # handler-onmouseout |
Compatibilité des navigateurs
Voir aussi
- Apprendre : Introduction aux évènements
- L'évènement
mousedown - L'évènement
mouseup - L'évènement
mousemove - L'évènement
click - L'évènement
dblclick - L'évènement
mouseover - L'évènement
mouseenter - L'évènement
mouseleave - L'évènement
contextmenu - L'évènement
pointerout