JavaScript中event.relatedTarget用法详解

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
    });
  });
});

这样每次移入移出都会打印来源和目标标签名，一目了然。

今天关于《JavaScript中event.relatedTarget用法详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！