diff options
Diffstat (limited to 'files/fr/web/api/element/mouseleave_event/index.html')
| -rw-r--r-- | files/fr/web/api/element/mouseleave_event/index.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/files/fr/web/api/element/mouseleave_event/index.html b/files/fr/web/api/element/mouseleave_event/index.html new file mode 100644 index 0000000000..48425a84f8 --- /dev/null +++ b/files/fr/web/api/element/mouseleave_event/index.html @@ -0,0 +1,148 @@ +--- +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><span class="seoSummary">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.</span></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> + +<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;"> +<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></div> +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><div></code> le plus haut dans la hiérarchie. + +<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></div> +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.</div> + +<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"><div id='mouseTarget'> + <ul id="unorderedList"> + <li>Pas encore d'évènement !</li> + </ul> +</div></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 => { + 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); +}</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> |