Element：mouseleave 事件

基线

广泛可用

自 2015年7月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

查看完整兼容性
了解更多

mouseleave 事件在定点设备（通常是鼠标）的光标移出 Element 时，会在该元素上触发。

mouseleave 与 mouseout 相似，但区别在于 mouseleave 不会冒泡，而 mouseout 会冒泡。这意味着当指针已离开该元素及其所有后代时，会触发 mouseleave；而由于冒泡，当指针离开该元素或离开该元素的某个后代时（即使指针仍在该元素内），也会触发 mouseout。除此之外，在同一情形下，leave 与 out 事件会在适当时同时派发。

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

请注意，「移出某个元素」指的是元素在 DOM 树中的位置，而不是其视觉位置。例如，若两个兄弟元素的定位使其中一个位于另一个内部，则从外部元素移入内部元素会在外部元素上触发 mouseleave，即使指针仍位于外部元素的边界内。

语法

在诸如 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。

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

onmouseleave = (event) => { }

HTML

html

<div id="mouseTarget">
  <ul id="unorderedList">
    <li>还没有事件！</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(`这是 mouseenter 事件 ${enterEventCount}。`);
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.border = "1px solid #333333";
  leaveEventCount++;
  addListItem(`这是 mouseleave 事件 ${leaveEventCount}。`);
});

function addListItem(text) {
  // 使用提供的文本创建一个新的文本节点
  const newTextNode = document.createTextNode(text);

  // 创建一个新的 li 元素
  const newListItem = document.createElement("li");

  // 将文本节点添加到 li 元素
  newListItem.appendChild(newTextNode);

  // 将新创建的列表项添加到列表
  unorderedList.appendChild(newListItem);
}