元素：mouseleave 事件

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

当定点设备（通常是鼠标）的光标移出某个 Element 时，会触发 mouseleave 事件。

mouseleave 和 mouseout 相似，但不同之处在于 mouseleave 不会冒泡，而 mouseout 会。这意味着当指针离开元素及其所有后代时，会触发 mouseleave，而当指针离开元素或离开元素的某个后代时，会触发 mouseout，这是由于冒泡（即使指针仍在该元素内）。除此之外，如果适用，在相同情况下，leave 和 out 事件会同时分派。

当元素从 DOM 中替换或移除时，不会触发 mouseleave 和 mouseout 事件。

请注意，“移出元素”是指元素在 DOM 树中的位置，而不是其视觉位置。例如，如果两个同级元素定位方式使其中一个位于另一个内部，那么从外部元素移到内部元素会触发外部元素的 mouseleave，即使指针仍在外部元素的边界内。

语法

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

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

onmouseleave = (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 的别名。

HTML

html

<div id="mouseTarget">
  <ul id="unorderedList">
    <li>No events yet!</li>
  </ul>
</div>

CSS

为 <div> 设置样式以使其更可见。

css

#mouseTarget {
  box-sizing: border-box;
  width: 15rem;
  border: 1px solid #333333;
}

JavaScript

let enterEventCount = 0;
let leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.border = "5px dotted orange";
  enterEventCount++;
  addListItem(`This is mouseenter event ${enterEventCount}.`);
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.border = "1px solid #333333";
  leaveEventCount++;
  addListItem(`This is mouseleave event ${leaveEventCount}.`);
});

function addListItem(text) {
  // Create a new text node using the supplied text
  const newTextNode = document.createTextNode(text);

  // Create a new li element
  const newListItem = document.createElement("li");

  // Add the text node to the li element
  newListItem.appendChild(newTextNode);

  // Add the newly created list item to list
  unorderedList.appendChild(newListItem);
}