onmouseleave 事件

DOM 事件 MouseEvent

实例

将鼠标指针移出图像时执行 JavaScript：

<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">

亲自试一试

页面下方有更多 TIY 实例。

定义和用法

当鼠标指针移出元素时，onmouseleave 事件发生。

提示：此事件通常与 onmouseenter 事件一起使用，当鼠标指针移动到元素上时会发生该事件。

提示： onmouseleave 事件类似于 onmouseout 事件。唯一的区别是 onmouseleave 事件不会冒泡（不会向上级文档层次结构传播）。请参阅页面底部的更多实例。

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
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 或更早的版本不支持 addEventListener() 方法。

技术细节

冒泡： 不支持
可取消： 不支持
事件类型： MouseEvent
支持的 HTML 标签： 所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <title>
DOM 版本： Level 2 Events

更多实例

实例

本例演示了 onmousemove、onmouseleave 和 onmouseout 事件之间的区别：

<div onmousemove="myMoveFunction()">
  <p id="demo">I will demonstrate onmousemove!</p>
</div>

<div onmouseleave="myLeaveFunction()">
  <p id="demo2">I will demonstrate onmouseleave!</p>
</div>

<div onmouseout="myOutFunction()">
  <p id="demo3">I will demonstrate onmouseout!</p>
</div>

亲自试一试

DOM 事件 MouseEvent