手册

概览

JavaScript Array 对象 Location 对象 JavaScript anchor() 方法 JavaScript charCodeAt() 方法 HTML DOM readyState 属性 HTML DOM createAttribute() 方法 History 对象 button 事件属性 onmousemove 事件 onresize 事件 JavaScript match() 方法 onselect 事件 onunload 事件 ondblclick 事件 Window 对象 Navigator 对象 HTML DOM anchors 集合 HTML DOM forms 集合 onwheel 事件 screenY 事件属性 ondragend 事件 ondragover 事件 ondrop 事件 onloadedmetadata 事件 HTML DOM doctype 属性 onbeforeunload 事件 JavaScript toLowerCase() 方法 animationstart 事件 strictErrorChecking 属性 getElementsByName() 方法 createComment() 方法 ononline 事件 onmouseleave 事件 onoffline 事件 onmouseover 事件 documentElement 属性 onwaiting 事件 HTML DOM write() 方法 JavaScript 运算符 HTML DOM URL 属性 JavaScript substr() 方法 timeStamp 事件属性 JavaScript split() 方法 ontimeupdate 事件 animationiteration 事件 onseeking 事件 HTML DOM documentURI 属性 oninput 事件 relatedTarget 事件属性 Link rev 属性 HTML DOM createTextNode() 方法 transitionend 事件 onmouseout 事件 onkeyup 事件 oncanplaythrough 事件 ondragstart 事件 onplaying 事件 JavaScript atan2() 方法 onbeforeprint 事件 oncut 事件 cancelable 事件属性

Browser 对象

DOM 对象

HTML 对象

对象属性

JavaScript concat() 方法 JavaScript Array every() 方法 JavaScript Array filter() 方法 JavaScript indexOf() 方法 JavaScript join() 方法

首页大前端 JavaScript JavaScript 参考手册

onmouseleave 事件

阅读15778

更新时间2022-04-24

ononline 事件

onoffline 事件

onmouseleave 事件

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

在以下更多实例中点 "尝试一下" 查看更多演示。

定义和用法

onmouseleave 事件在鼠标移除元素时触发。

提示： 该事件通常与onmouseenter 事件一起使用，该事件在鼠标移动到元素上时触发。

提示: onmouseleave 事件类似于onmouseout 事件。唯一的区别是 onmouseleave 事件不支持冒泡。

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
OnMouseLeave在	30.0	5.5	是	6.1	11.5

语法

HTML 中:

<element onmouseleave="myScript">尝试一下

JavaScript 中:

object.onmouseleave=function(){myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("mouseleave", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

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

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

ononline 事件

onoffline 事件