当前位置：文江博客知识库简体中文文档 Web API Element mouseout_event

Element: mouseout 事件 - Web API 接口参考编辑

当移动指针设备（通常是鼠标），使指针不再包含在这个元素或其子元素中时，mouseout 事件被触发。当指针从一个元素移入其子元素时，mouseout 也会被触发，因为子元素遮盖了父元素的可视区域。

Bubbles	Yes
Cancelable	Yes
Interface	`MouseEvent`
Event handler property	`onmouseout`

示例

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

mouseout 和 mouseleave

以下示例说明了 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

let test = document.getElementById("test");

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

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

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

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