View in EnglishAlways switch to English

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 ⁨2015年7月⁩.

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

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

语法

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

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

事件类型

一个MouseEvent。继承自Event。

事件属性

这个接口也继承其父接口UIEvent 和Event 的属性。

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

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

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

HTML

html

<ul>  <li>item 1</li>  <li>item 2</li>  <li>item 3</li></ul>

JavaScript

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