最直接可靠的方式是使用事件对象的 target 属性或 document.elementFromPoint() 方法：前者适用于 mouseover/mouseenter/mousemove 事件中获取触发元素，后者用于任意时刻获取鼠标下最上层可见元素。
在 JavaScript 中，获取当前鼠标悬停的目标节点，最直接、可靠的方式是使用 事件对象的 target 属性（在 mouseover、mouseenter 或 mousemove 等事件中），但要注意区分语义和行为差异。下面分几种常见场景说明：
监听 mouseover / mouseenter 时取 event.target
这是最常用的方法。当鼠标移入某个元素时，事件触发，event.target 就是**实际被悬停的最内层元素**（即事件目标节点）：
-
mouseover会冒泡，且会触发在子元素上（比如悬停文字、图标等内部节点）； -
mouseenter不冒泡，只在绑定元素本身进入时触发，event.target仍是该元素（除非用currentTarget更稳妥）； - 若需稳定获取“当前悬停的顶层容器”，建议结合
event.currentTarget或向上查找父级（如closest('.card')）。
实时跟踪悬停节点：用 mousemove + document.elementFromPoint
如果需要**无事件绑定、任意时刻获取鼠标下的元素**（比如全局监控、拖拽反馈、取色器），可用：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const x = event.clientX; const y = event.clientY; const hoveredEl = document.elementFromPoint(x, y);
注意：
- elementFromPoint 返回视口坐标 (x, y) 处**最上层的可见元素**（忽略 pointer-events: none 的元素）；
- 它不依赖事件源，适合在 mousemove 中高频调用（但注意性能，可节流）；
- 若鼠标在空白处或 iframe 外，可能返回 null 或 document.body。
避免常见误区
- 别混淆
event.target和event.currentTarget：前者是实际触发事件的元素（可能是子元素），后者是绑定事件的元素； -
mouseenter不会冒泡，所以不会像mouseover那样频繁触发在嵌套子元素上； - 若元素有
visibility: hidden或opacity: 0，elementFromPoint仍可能选中它（只要没设pointer-events: none）； - 移动端没有“悬停”概念，这类逻辑需配合
touchstart/touchmove或降级处理。
一个实用小技巧：hoveredElement 缓存
为减少重复查询，可在 mousemove 中缓存最近一次有效悬停节点：
立即学习“Java免费学习笔记（深入）”；
let hoveredElement = null;
document.addEventListener('mousemove', (e) => {
const el = document.elementFromPoint(e.clientX, e.clientY);
if (el !== hoveredElement) {
hoveredElement = el;
console.log('现在悬停在：', el?.tagName);
}
});这样既响应及时，又避免每次操作都做 DOM 查询。
