Element:mouseout 事件

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.

mouseout 事件在定点设备(通常是鼠标)移动至元素或其子元素之外时,会在该元素上触发。

当指针从一个元素移入其子元素时,因为子元素遮盖了父元素的可视区域,所以 mouseout 也会被触发。

语法

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

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

onmouseout = (event) => {};

事件类型

事件属性

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

MouseEvent.altKey 只读

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

MouseEvent.button 只读

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

MouseEvent.buttons 只读

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

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

示例

以下示例将说明如何使用 mouseout 事件。

mouseout 和 mouseleave

以下示例说明了 mouseoutmouseleave 事件的区别。为 <ul> 添加 mouseleave 事件,以在鼠标离开 <ul> 元素时将列表变成紫色。添加 mouseout 事件,以在鼠标移出目标元素时将目标元素变成橙色。

当你尝试的时候,你会发现 mouseout 被添加到单个列表项目上,而 mouseleave 则应用于整个列表,这取决于列表项目的层次关系,而列表项目遮盖了底层的 <ul>

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

// 当鼠标移出 <ul> 元素时,短暂地将列表变成紫色
test.addEventListener(
  "mouseleave",
  (event) => {
    // 高亮 mouseleave 的目标
    event.target.style.color = "purple";

    // 延迟一秒后重置颜色
    setTimeout(() => {
      event.target.style.color = "";
    }, 1000);
  },
  false,
);

// 当鼠标离开 <li> 元素时,短暂地将其变成橙色
test.addEventListener(
  "mouseout",
  (event) => {
    // 高亮 mouseout 的目标
    event.target.style.color = "orange";

    // 延迟 500ms 后重置颜色
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);

结果

规范

Specification
UI Events
# event-type-mouseout
HTML Standard
# handler-onmouseout

浏览器兼容性

BCD tables only load in the browser

参见