Element: mouseout 事件

语法

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

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

onmouseout = (event) => { }

事件类型

一个 MouseEvent。继承自 UIEvent 和 Event。

事件属性

此接口还继承其父级 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 的别名。

示例

以下示例展示了 mouseout 事件的使用。

mouseout 和 mouseleave

以下示例说明了 mouseout 和 mouseleave 事件之间的区别。mouseleave 事件被添加到 <ul> 中，以便当鼠标离开 <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");

// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener("mouseleave", (event) => {
  // highlight the mouseleave target
  event.target.style.color = "purple";

  // reset the color after a short delay
  setTimeout(() => {
    event.target.style.color = "";
  }, 1000);
});

// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener("mouseout", (event) => {
  // highlight the mouseout target
  event.target.style.color = "orange";

  // reset the color after a short delay
  setTimeout(() => {
    event.target.style.color = "";
  }, 500);
});

结果

规范

浏览器兼容性

另见

• 学习：事件简介
• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseenter
• mouseleave
• contextmenu
• pointerout