files/fr/web/api/element/mouseleave_event/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

---
title: 'Element : évènement mouseleave'
slug: Web/API/Element/mouseleave_event
tags:
  - API
  - DOM
  - Element
  - Event
  - Reference
  - mouseleave
translation_of: Web/API/Element/mouseleave_event
---
<p>{{APIRef}}</p>

<p>L'évènement <strong><code>mouseleave</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Se propage/remonte dans le DOM</th>
   <td>Non</td>
  </tr>
  <tr>
   <th scope="row">Annulable</th>
   <td>Non</td>
  </tr>
  <tr>
   <th scope="row">Interface</th>
   <td>{{domxref("MouseEvent")}}</td>
  </tr>
  <tr>
   <th scope="row">Propriété pour la gestion d'évènement</th>
   <td>{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}</td>
  </tr>
 </tbody>
</table>

<p><code>mouseleave</code> et {{event('mouseout')}} se ressemblent mais <code>mouseleave</code> ne remonte pas dans le DOM tandis que <code>mouseout</code> remonte. <code>mouseleave</code> est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que <code>mouseout</code> 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).</p>

<img src="mouseleave.png">
<p>Un évènement <code>mouseleave</code> 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 <code>&lt;div&gt;</code> le plus haut dans la hiérarchie.</p>

<img src="mouseout.png">
<p>Un seul évènement <code>mouseout</code> 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.</p>

<h2 id="Exemples">Exemples</h2>

<p>Voir la documentation de <a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a> pour un exemple sur les différences entre <code>mouseout</code> et <code>mouseleave</code>.</p>

<p>Ici, on utilise l'évènement <code>mouseenter</code> pour modifier la bordure d'un élément <code>div</code> lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements <code>mouseenter</code> et <code>mouseleave</code>.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div id='mouseTarget'&gt;
 &lt;ul id="unorderedList"&gt;
  &lt;li&gt;Pas encore d'évènement !&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<p>On met le <code>div</code> en forme afin de le rendre plus visible.</p>

<pre class="brush: css">#mouseTarget {
  box-sizing: border-box;
  width:15rem;
  border:1px solid #333;
}</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">var enterEventCount = 0;
var leaveEventCount = 0;
const mouseTarget = document.getElementById('mouseTarget');
const unorderedList = document.getElementById('unorderedList');

mouseTarget.addEventListener('mouseenter', e =&gt; {
  mouseTarget.style.border = '5px dotted orange';
  enterEventCount++;
  addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
});

mouseTarget.addEventListener('mouseleave', e =&gt; {
  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);
}</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemples')}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
  </tr>
  <tr>
   <td>{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}</td>
   <td>{{Spec2('UI Events')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("api.Element.mouseleave_event")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
 <li>D'autres évènements connexes
  <ul>
   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
  </ul>
 </li>
</ul>