Element:mouseout 事件
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
mouseout
事件在定点设备(通常是鼠标)移动至元素或其子元素之外时,会在该元素上触发。
当指针从一个元素移入其子元素时,因为子元素遮盖了父元素的可视区域,所以 mouseout
也会被触发。
语法
在类似 addEventListener()
这样的方法中使用事件名称,或者设置事件处理器属性。
addEventListener("mouseout", (event) => {});
onmouseout = (event) => {};
事件类型
一个 MouseEvent
。继承自 Event
。
事件属性
这个接口也继承其父接口 UIEvent
和 Event
的属性。
MouseEvent.altKey
只读-
当鼠标事件被触发时,如果 alt 键已被按下,返回
true
。 -
触发鼠标事件时,按下按钮的编号(如果适用)。
-
触发鼠标事件时,按下的按钮(如果存在)。
MouseEvent.clientX
只读-
鼠标指针相对于局部 DOM 元素的 X 轴坐标。
MouseEvent.clientY
只读-
鼠标指针相对于局部 DOM 元素的 Y 轴坐标。
MouseEvent.ctrlKey
只读-
当鼠标事件被触发时,如果 control 键已被按下,返回
true
。 MouseEvent.layerX
非标准 只读-
返回事件相对于当前层的水平坐标。
MouseEvent.layerY
非标准 只读-
返回事件相对于当前层的垂直坐标。
MouseEvent.metaKey
只读-
当鼠标事件被触发时,如果 meta 键已被按下,返回
true
。 MouseEvent.movementX
只读-
鼠标指针相对于最后一次
mousemove
事件位置的 X 轴坐标。 MouseEvent.movementY
只读-
鼠标指针相对于最后一次
mousemove
事件位置的 Y 轴坐标。 MouseEvent.offsetX
只读-
鼠标指针相对于目标节点的内填充边的 X 轴坐标。
MouseEvent.offsetY
只读-
鼠标指针相对于目标节点的内填充边的 Y 轴坐标。
MouseEvent.pageX
只读-
鼠标指针相对于整个文档的 X 轴坐标。
MouseEvent.pageY
只读-
鼠标指针相对于整个文档的 Y 轴坐标。
-
事件的次要目标(如果存在)。
MouseEvent.screenX
只读-
鼠标指针相对于屏幕的 X 轴坐标。
MouseEvent.screenY
只读-
鼠标指针相对于屏幕的 Y 轴坐标。
MouseEvent.shiftKey
只读-
当鼠标事件被触发时,如果 shift 键已被按下,返回
true
。 MouseEvent.mozInputSource
非标准 只读-
生成事件的设备类型(
MOZ_SOURCE_*
常量之一)。例如,这允许你决定鼠标事件是否由实际的鼠标还是触摸事件生成(这可能会在一定程度影响你对事件相关坐标判断的准确性)。 MouseEvent.webkitForce
非标准 只读-
单击时施加的压力大小。
MouseEvent.x
只读-
MouseEvent.clientX
的别名。 MouseEvent.y
只读-
MouseEvent.clientY
的别名。
示例
以下示例将说明如何使用 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
const test = document.getElementById("test");
// 当鼠标移出 <ul> 元素时,短暂地将列表变成紫色
test.addEventListener(
"mouseleave",
(event) => {
// 高亮 mouseleave 的目标
event.target.style.color = "purple";
// 延迟一秒后重置颜色
setTimeout(() => {
event.target.style.color = "";
}, 1000);
},
false,
);
// 当鼠标离开 <li> 元素时,短暂地将其变成橙色
test.addEventListener(
"mouseout",
(event) => {
// 高亮 mouseout 的目标
event.target.style.color = "orange";
// 延迟 500ms 后重置颜色
setTimeout(() => {
event.target.style.color = "";
}, 500);
},
false,
);
结果
规范
Specification |
---|
UI Events # event-type-mouseout |
HTML Standard # handler-onmouseout |
浏览器兼容性
BCD tables only load in the browser