Element:mouseover 事件
当一个定点设备(通常指鼠标)在一个元素本身或者其子元素上移动时,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