如何用 mouseleave 与 mouseout 区分后代元素触发的冒泡-js教程-PHP中文网

mouseleave不冒泡且仅在鼠标完全离开绑定元素及其所有后代时触发，mouseout会冒泡且离开任意后代即触发；推荐优先使用mouseleave，需子级细粒度响应时再用mouseout配合relatedtarget判断。

如何用 mouseleave 与 mouseout 区分后代元素触发的冒泡

要区分 mouseleave 和 mouseout 在后代元素触发时的行为差异，关键在于理解它们的**事件冒泡机制与目标判断逻辑不同**。

mouseout 会冒泡，且只要移出任意子元素就触发

mouseout 是冒泡事件，当鼠标从当前元素或其任意后代元素移出到外部（包括移入兄弟元素、父元素外、空白区域等）时都会触发。更重要的是：它会在鼠标离开**任何一个后代元素**时，向上传播并触发绑定在祖先上的监听器——即使鼠标仍在父容器内。

例如：

鼠标从 <div class="parent"><span>文本</span></div> 的 <span></span> 移到 <div> 的空白区域 → 触发 <code>mouseout（因为离开了 span）
此时若监听器绑在 .parent 上，也会收到该事件（冒泡所致）

mouseleave 不会冒泡，只在真正离开绑定元素边界时触发

mouseleave **不冒泡**，且浏览器内部做了优化：只有当鼠标指针**完全离开绑定元素及其所有后代元素的边界**时，才会触发。它自动忽略在子元素之间移动的过程。

这意味着：

鼠标在 .parent 内从 span 移到 button → 不触发 mouseleave
鼠标从 .parent 移出到外部（如旁边另一个 div 或 body 空白处）→ 才触发 mouseleave

用 `relatedTarget` 辅助判断 mouseout 的实际离开方向

如果必须用 mouseout（比如需要捕获子元素离开瞬间），可通过 event.relatedTarget 判断鼠标移向何处：

若 relatedTarget === null：鼠标移出了窗口或 iframe 外部
若 relatedTarget 是当前元素的子元素或自身：说明只是在内部移动（可忽略）
若 relatedTarget 是外部元素（如兄弟节点、body 等），且不在当前元素的 DOM 子树中 → 真正离开

简单判断是否“真正离开”可写为：

function isTrulyLeaving(event) {
  const parent = event.currentTarget;
  const next = event.relatedTarget;
  return !next || !parent.contains(next);
}