元素：mouseover 事件

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中可用 2015 年 7 月.

当使用指向设备（例如鼠标或触控板）将光标移动到元素或其子元素上时，mouseover 事件会在 Element 上触发。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("mouseover", (event) => {});

onmouseover = (event) => {};

事件类型

一个 MouseEvent。继承自 UIEvent 和 Event。

Event UIEvent MouseEvent

事件属性

此接口还继承其父级 UIEvent 和 Event 的属性。

MouseEvent.altKey 只读

如果在触发鼠标事件时 alt 键处于按下状态，则返回 true。

MouseEvent.button 只读

触发鼠标事件时按下的按钮编号（如果适用）。

MouseEvent.buttons 只读

触发鼠标事件时按下的按钮（如果有）。

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.relatedTarget 只读

事件的次要目标（如果有）。

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

html
<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

JavaScript

js
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);
  },
  false,
);

// 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);
  },
  false,
);

结果

规范

规范
UI 事件
# event-type-mouseover
HTML 标准
# handler-onmouseover

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅