onmouseleave event


onmouseleave Event

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»

Click "Run Example" button to view online examples

Click "Try it" in the following more examples to view more demos.

Definition and usage

The onmouseleave event is triggered when the mouse removes an element.

Tips: This event is usually used together with the onmouseenter event. This event is fired when the mouse moves over the element.

Tips: The onmouseleave event is similar to the onmouseout event. The only difference is that the onmouseleave event does not support bubbling.

Browser support

The number in the table indicates the version number of the first browser that supports the event.

30.0 5.5

Syntax

HTML:

<element onmouseleave="myScript"> Try it

JavaScript:

object.onmouseleave=function(){myScript};Try it

In JavaScript, use the addEventListener() method:

object.addEventListener("mouseleave", myScript); try it

Note: Internet Explorer 8 and earlier IE versions do not support the addEventListener() method.

Technical details

event




##OnMouseLeave at ## is 6.111.5
Whether bubbling is supported:No
Can it be canceled:No
Event type: MouseEvent
Supported HTML tags:All HTML elements, except <Base>, <BDO>, Result, <HEAD>, <HTML>, <IFRAME>, <META>, <param>, <SCRIPT>, <STYLE> ; and <title>


More examples

Instance

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

Run Instance»Click the "Run Instance" button to view the online instance


←
→