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

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

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

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

HTML

<ul id="test">
  <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,
);

结果

• 事件介绍
• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseenter
• mouseleave
• contextmenu