Element:mouseout 事件
mouseout
事件在定点设备(通常是鼠标)移动至元素或其子元素之外时,会在该元素上触发。
当指针从一个元素移入其子元素时,因为子元素遮盖了父元素的可视区域,所以 mouseout
也会被触发。
语法
在类似 addEventListener()
这样的方法中使用事件名称,或者设置事件处理器属性。
js
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
(en-US) 非标准 只读-
返回事件相对于当前层的水平坐标。
MouseEvent.layerY
(en-US) 非标准 只读-
返回事件相对于当前层的垂直坐标。
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
(en-US) 非标准 只读-
单击时施加的压力大小。
MouseEvent.x
只读-
MouseEvent.clientX
的别名。 MouseEvent.y
只读-
MouseEvent.clientY
的别名。
示例
以下示例将说明如何使用 mouseout
事件。
mouseout 和 mouseleave
以下示例说明了 mouseout
和 mouseleave
事件的区别。为 <ul>
添加 mouseleave
事件,以在鼠标离开 <ul>
元素时将列表变成紫色。添加 mouseout
事件,以在鼠标移出目标元素时将目标元素变成橙色。
当你尝试的时候,你会发现 mouseout
被添加到单个列表项目上,而 mouseleave
则应用于整个列表,这取决于列表项目的层次关系,而列表项目遮盖了底层的 <ul>
。
HTML
html
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
JavaScript
js
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