Element: mouseover 事件
当使用指点设备（如鼠标或触控板）将光标移到 Element 元素或其子元素上时，将触发 mouseover 事件。
如果目标元素有子元素，当鼠标移动到这些元素的边界时，也会触发 mouseout 和 mouseover 事件，而不仅仅是目标元素本身。通常，mouseenter 和 mouseleave 事件的行为更合理，因为它们不受移动到子元素中的影响。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
addEventListener("mouseover", (event) => { })
onmouseover = (event) => { }
事件类型
一个 MouseEvent。继承自 UIEvent 和 Event。
事件属性
此接口还继承其父级 UIEvent 和 Event 的属性。
MouseEvent.altKey只读-
如果鼠标事件触发时 alt 键处于按下状态，则返回
true。 -
鼠标事件触发时按下的按钮编号（如果适用）。
-
鼠标事件触发时按下的按钮（如果有）。
MouseEvent.clientX只读-
鼠标指针在视口坐标中的 X 坐标。
MouseEvent.clientY只读-
鼠标指针在视口坐标中的 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");
// This handler will be executed only once when the cursor
// moves over the unordered list
test.addEventListener("mouseenter", (event) => {
// highlight the mouseenter target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
});
// This handler will be executed every time the cursor
// is moved over a different list item
test.addEventListener("mouseover", (event) => {
// highlight the mouseover target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
});
结果
规范
| 规范 |
|---|
| UI 事件 # event-type-mouseover |
| HTML # handler-onmouseover |
浏览器兼容性
加载中…