acara onmouseleave


onmouseleave acara

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>

run instance»

klik Butang "Jalankan Contoh" untuk melihat contoh dalam talian

Klik "Cuba" antara lebih banyak contoh di bawah untuk melihat lebih banyak tunjuk cara.

Definisi dan Penggunaan

Acara onmouseleave dicetuskan apabila tetikus mengalih keluar elemen.

Petua: Acara ini biasanya digunakan bersama dengan acara onmouseenter. Peristiwa ini dicetuskan apabila tetikus bergerak ke atas elemen.

Petua: Acara onmouseleave adalah serupa dengan acara onmouseout. Satu-satunya perbezaan ialah acara onmouseleave tidak menyokong gelembung.

Sokongan Penyemak Imbas

Nombor dalam jadual menunjukkan nombor versi penyemak imbas pertama yang menyokong acara tersebut.

Acara
事件




OnMouseLeave在30.05.5是6.111.5
<🎜><🎜><🎜><🎜>
OnMouseLeave dalam<🎜><🎜>30.0 5.5Ya<🎜><🎜>6.111.5< /td>

Sintaks

HTML:

<elemen onmouseleave="myScript"> ia

JavaScript:

objek.onmouseleave=function(){myScript}; 🎜>
Dalam JavaScript, gunakan kaedah addEventListener():

objek
.addEventListener("mouseleave", myScript); 🎜>
Nota:
Internet Explorer 8 dan versi IE terdahulu tidak menyokong kaedah addEventListener().

Butiran teknikal

是否支持冒泡:没有
是否可以取消:没有
事件类型:的MouseEvent
支持的 HTML 标签:所有HTML元素，除了<基>，<BDO>，结果，<HEAD>，<HTML>，<IFRAME>，<META>，<param>的<SCRIPT>，<STYLE>和<标题>

Lebih banyak contoh

Contoh

<!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>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


←
→