Element:mouseover 事件
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.
当一个定点设备(通常指鼠标)在一个元素本身或者其子元素上移动时,mouseover
事件在该元素上触发。
语法
在类似 addEventListener()
这样的方法中使用事件名称,或者设置事件处理器属性。
addEventListener("mouseover", (event) => {});
onmouseover = (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
的别名。
示例
以下的示例阐述了 mouseover
和 mouseenter
之间的区别。
HTML
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
JavaScript
const test = document.getElementById("test");
// 当光标移到无序列表上时,此处理函数将仅执行一次
test.addEventListener(
"mouseenter",
(event) => {
// 突出显示鼠标悬停目标
event.target.style.color = "purple";
// 短暂延迟后重置颜色
setTimeout(() => {
event.target.style.color = "";
}, 500);
},
false,
);
// 每次将光标移动到不同的列表项上时,此处理函数都会执行
test.addEventListener(
"mouseover",
(event) => {
// 突出显示鼠标悬停目标
event.target.style.color = "orange";
// 短暂延迟后重置颜色
setTimeout(() => {
event.target.style.color = "";
}, 500);
},
false,
);
结果
规范
Specification |
---|
UI Events # event-type-mouseover |
HTML Standard # handler-onmouseover |
浏览器兼容性
BCD tables only load in the browser