Définition et utilisation
L'événement mouseleave se produit lorsque le pointeur de la souris quitte un élément.
Cet événement est le plus souvent utilisé avec l'événement mouseenter.
La méthode mouseleave() déclenche l'événement mouseleave ou spécifie une fonction à exécuter lorsque l'événement mouseleave se produit.
Remarque : Contrairement à l'événement mouseout, l'événement mouseleave ne sera déclenché que lorsque le pointeur de la souris quitte l'élément sélectionné. Si le pointeur de la souris quitte un élément enfant, l'événement mouseout sera également déclenché.
Regardons un exemple
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.out").mouseout(function(){
$(".out span").text(x+=1);
});
$("div.leave").mouseleave(function(){
$(".leave span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
<p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
<div class="out" style="background-color:lightgray;padding:20px;width:300px;">
<h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
</div>
</br>
<div class="leave" style="background-color:lightgray;padding:20px;width:300px;">
<h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
</div>
</body>
</html>section suivante