Element:mouseover 事件

当一个定点设备(通常指鼠标)在一个元素本身或者其子元素上移动时,mouseover 事件在该元素上触发。

语法

在类似 addEventListener() 这样的方法中使用事件名称,或者设置事件处理器属性。

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

onmouseover = (event) => {};

事件类型

事件属性

这个接口也继承其父接口 UIEventEvent 的属性。

MouseEvent.altKey 只读

当鼠标事件被触发时,如果 alt 键已被按下,返回 true

MouseEvent.button 只读

触发鼠标事件时,按下按钮的编号(如果适用)。

MouseEvent.buttons 只读

触发鼠标事件时按下的按钮(如果存在)。

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

事件的次要目标(如果存在)。

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 的别名。

示例

以下的示例阐述了 mouseovermouseenter 之间的区别。

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");

// 当光标移到无序列表上时,此处理函数将仅执行一次
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

参见