From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/element/mouseout_event/index.html | 125 +++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/fr/web/api/element/mouseout_event/index.html (limited to 'files/fr/web/api/element/mouseout_event') diff --git a/files/fr/web/api/element/mouseout_event/index.html b/files/fr/web/api/element/mouseout_event/index.html new file mode 100644 index 0000000000..ee0921b941 --- /dev/null +++ b/files/fr/web/api/element/mouseout_event/index.html @@ -0,0 +1,125 @@ +--- +title: 'Element : évènement mouseout' +slug: Web/API/Element/mouseout_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - mouseout +translation_of: Web/API/Element/mouseout_event +--- +
{{APIRef}}
+ +

L'évènement mouseout est déclenché à partir d'un {{domxref("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 DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}
+ +

Exemples

+ +

Dans l'exemple suivant, on illustre la différence entre mouseout et mouseleave. Ce dernier est ajouté à {{HTMLElement("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

+ +

{{EmbedLiveSample("Exemples", 640, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.mouseout_event")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf