Element : évènement mouseout
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
L'évènement mouseout
est déclenché à partir d'un Element
lorsqu'un dispositif de pointage (ex. 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.
Se propage/remonte dans le DOM | Oui |
---|---|
Annulable | Oui |
Interface | MouseEvent |
Propriété pour la gestion d'évènements | onmouseout |
Exemples
Dans l'exemple suivant, on illustre la différence entre 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.
En essayant cet exemple, vous pourrez voir que mouseout
est envoyé aux éléments individuels de la liste tandis que mouseleave
est géré sur la liste entière. Cela provient 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
let 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
Specification |
---|
UI Events # event-type-mouseout |
HTML Standard # handler-onmouseout |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Une introduction aux évènements
- D'autres évènements connexes