événement onmouseleave
onmouseleave événement
instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<img onmouseenter="bigImg(this)" onmouseleave="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>
bigImg() 函数在用户将鼠标指针移动到该图像时触发。</p>
<p>
normalImg() 函数在用户将鼠标指针移出图像时触发。</p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>exécuter l'instance»
cliquez Bouton « Exécuter l'exemple » pour afficher des exemples en ligne
Cliquez sur « Essayer » parmi d'autres exemples ci-dessous pour voir plus de démos.
Définition et utilisation
L'événement onmouseleave est déclenché lorsque la souris supprime un élément.
Astuce : Cet événement est généralement utilisé avec l'événement onmouseenter. Cet événement est déclenché lorsque la souris passe sur l'élément.
Conseils : L'événement onmouseleave est similaire à l'événement onmouseout. La seule différence est que l'événement onmouseleave ne prend pas en charge le bouillonnement.
Support du navigateur
Le numéro dans le tableau indique le numéro de version du premier navigateur qui prend en charge l'événement.
| Événement |
| <🎜> | <🎜> | <🎜> | <🎜> | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| OnMouseQuitter dans<🎜><🎜> | 30.0 | 5,5 | Oui<🎜><🎜> | 6,1 | 11,5< /td> |
Syntaxe
HTML :
<element onmouseleave="myScript"> it
JavaScript :
object.onmouseleave=function(){myScript}; 🎜>
En JavaScript, utilisez la méthode addEventListener() :object
Internet Explorer 8 et les versions antérieures d'IE ne prennent pas en charge la méthode addEventListener(). .addEventListener("mouseleave", myScript); 🎜>
Remarque : Détails techniques
| 是否支持冒泡: | 没有 |
|---|---|
| 是否可以取消: | 没有 |
| 事件类型: | 的MouseEvent |
| 支持的 HTML 标签: | 所有HTML元素，除了<基>，<BDO>，结果，<HEAD>，<HTML>，<IFRAME>，<META>，<param>的<SCRIPT>，<STYLE>和<标题> |
Plus d'exemples
Exemples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
p {
background-color: white;
}
</style>
</head>
<body>
<h3>以下实例演示了 onmousemove, onmouseleave 和 onmouseout 的区别。</h3>
<p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p>
<p> mouseleave 事件只在鼠标指针移出 div 元素时触发。 </p>
<p> onmouseout 事件在鼠标指针移出 div 元素及离开子元素（p 和 span）时触发。</p>
<div onmousemove="myMoveFunction()">
<p>onmousemove: <br> <span id="demo">鼠标移入和移出！</span></p>
</div>
<div onmouseleave="myLeaveFunction()">
<p>onmouseleave: <br> <span id="demo2">鼠标移入和移出！</span></p>
</div>
<div onmouseout="myOutFunction()">
<p>onmouseout: <br> <span id="demo3">鼠标移入和移出！</span></p>
</div>
<script>
x = 0;
y = 0;
z = 0;
function myMoveFunction() {
document.getElementById("demo").innerHTML = z+=1;
}
function myLeaveFunction() {
document.getElementById("demo2").innerHTML = x+=1;
}
function myOutFunction() {
document.getElementById("demo3").innerHTML = y+=1;
}
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
