Element: mouseout 事件
当移动指针设备(通常是鼠标),使指针不再包含在这个元素或其子元素中时,mouseout
事件被触发。当指针从一个元素移入其子元素时,mouseout
也会被触发,因为子元素遮盖了父元素的可视区域。
Bubbles | Yes |
---|---|
Cancelable | Yes |
Interface | MouseEvent |
Event handler property | onmouseout |
示例
以下示例将说明如何使用 mouseout
事件。
mouseout 和 mouseleave
以下示例说明了 mouseout
和 mouseleave
事件的区别。当鼠标离开<ul>
时,mouseleave
事件会添加到 <ul>
以将列表变成紫色。mouseout
在鼠标移出目标元素时被添加到列表,以将目标元素变成橙色。
当你尝试的时候,你会发现 mouseout
被添加到单个列表项目上,而 mouseleave
则应用于整个列表,这取决于列表项目的层次关系,而列表项目遮盖了底层的 <ul>
。
HTML
<ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
JavaScript
let test = document.getElementById("test");
// 当鼠标移出<ul>元素时,短暂地将列表变成紫色
test.addEventListener("mouseleave", function( event ) {
// 高亮 mouseleave 的目标
event.target.style.color = "purple";
// 延迟一秒后重置颜色
setTimeout(function() {
event.target.style.color = "";
}, 1000);
}, false);
// 当鼠标离开<li>元素时,短暂地将其变成橙色
test.addEventListener("mouseout", function( event ) {
// 高亮 mouseout 的目标
event.target.style.color = "orange";
// 延迟 500ms 后重置颜色
setTimeout(function() {
event.target.style.color = "";
}, 500);
}, false);
结果
规范
Specification |
---|
UI Events # event-type-mouseout |
HTML Standard # handler-onmouseout |
浏览器兼容性
BCD tables only load in the browser