event.relatedtarget是鼠标边界事件中指向相邻节点的只读属性：mouseover时为离开的元素，mouseout/mouseleave时为将进入的元素，mouseenter时为离开的元素；非边界事件中为null。
event.relatedTarget 是鼠标事件（如 mouseenter、mouseleave、mouseover、mouseout）中一个非常实用的只读属性，它指向**与当前事件目标节点相邻的、鼠标正要离开或即将进入的那个节点**。它能帮你精准判断鼠标是从哪个元素移入、或移向了哪个元素——但要注意：它在不同事件中的含义和可用性有差异。
理解 relatedTarget 在不同事件中的行为
不是所有鼠标事件都支持 relatedTarget，也不是它的含义都一样：
-
mouseover/mouseout：支持relatedTarget。
•mouseover触发时，event.relatedTarget是鼠标**刚离开的那个元素**（即上一个父/兄弟/子节点）；
•mouseout触发时，event.relatedTarget是鼠标**即将进入的那个元素**（即下一个目标）。 -
mouseenter/mouseleave：也支持relatedTarget，但这两个事件不冒泡，且只在真正跨元素边界时触发。
•mouseenter：relatedTarget是鼠标**离开的前一个元素**（比如从按钮上移入卡片）；
•mouseleave：relatedTarget是鼠标**将要进入的下一个元素**（比如移出卡片后进入侧边栏）。 -
click、mousedown等非边界事件：没有relatedTarget（值为null）。
实际用法：检测鼠标从哪来、到哪去
以一个常见场景为例：你有一个导航菜单项 <li class="nav-item">，想在鼠标移入时知道它是不是从 logo 区域过来的，以便做特殊动画：
document.querySelector('.nav-item').addEventListener('mouseenter', function(e) {
const from = e.relatedTarget;
if (from && from.classList && from.classList.contains('logo')) {
console.log('鼠标从 logo 进入菜单项');
// 执行 logo → menu 的过渡动画
}
});
注意：必须检查 e.relatedTarget 是否存在（可能为 null），尤其当鼠标从页面外（如地址栏、标签页）进入时，relatedTarget 是 null。
常见陷阱与注意事项
-
IE8 及更早版本不支持
relatedTarget，需用event.fromElement（mouseout）或event.toElement（mouseover）兼容，但现代项目通常无需考虑。 -
relatedTarget返回的是 DOM 节点，不是选择器字符串，所以要用.tagName、.id、.className或.matches()判断类型，例如：if (e.relatedTarget?.matches('header, .banner')) { ... } - 在子元素上监听时容易误判：如果在容器内移动（比如从按钮移向文字），
relatedTarget可能是其子元素，此时可结合e.target === e.currentTarget或使用mouseenter/mouseleave避免内部浮动干扰。
调试技巧：快速验证 relatedTarget
临时加一段通用日志，帮助你在开发中看清流向：
['mouseenter', 'mouseleave', 'mouseover', 'mouseout'].forEach(type => {
document.body.addEventListener(type, e => {
console.log(`${type}:`, {
target: e.target.tagName,
related: e.relatedTarget?.tagName || 'null',
sameParent: e.target.parentNode === e.relatedTarget?.parentNode
});
});
});
这样每次移入移出都会打印来源和目标标签名，一目了然。
