js获取鼠标所在元素

要确定鼠标当前位于哪个元素内，JavaScript 提供了几种方法。你可以通过监听 mousemove 事件并在事件处理函数中检查 event.target 来得知鼠标所在的元素。此外，还可以使用 document.elementFromPoint 方法来查找特定坐标下的最顶层元素。

以下是两种常见的实现方式：

使用 mousemove 事件

你可以为整个文档或某个容器添加一个 mousemove 事件监听器，然后在事件处理函数中访问 event.target 属性来获取当前鼠标位置下的元素。

          javascript
          
        
document.addEventListener('mousemove', function(event) {
    const elementUnderMouse = event.target; // 或者 event.srcElement 在旧版IE中
    console.log('Mouse is over:', elementUnderMouse);
});

这种方法的优点是简单直接，但它可能会导致大量的事件触发，特别是在高分辨率显示器上或者当用户快速移动鼠标时。因此，它可能不适合性能敏感的应用场景。

使用 document.elementFromPoint

如果你不需要持续跟踪鼠标的每一个移动，而只是想在某些时刻（如点击、按键等）知道鼠标所在的位置，可以使用 document.elementFromPoint(x, y) 方法。这个方法接收两个参数：页面上的 X 和 Y 坐标，并返回该点最顶层的元素。

          javascript
          
        
function getElementAtCursor() {
    const mouseX = event.clientX;
    const mouseY = event.clientY;

    // 调用 document.elementFromPoint 获取元素
    const element = document.elementFromPoint(mouseX, mouseY);
    console.log('Element at cursor:', element);

    // 如果你想在获取元素后继续正常处理事件（例如点击），你需要恢复原来的样式
    // 这是因为 elementFromPoint 可能会忽略隐藏或非可见的元素
}

// 示例：绑定到 click 事件
document.addEventListener('click', function(event) {
    getElementAtCursor(event);
});

请注意，document.elementFromPoint 可能不会返回被设置为 visibility: hidden 或 display: none 的元素，也不会返回那些被其他元素完全覆盖的元素。如果需要更复杂的逻辑，你可能还需要考虑这些因素。

综合使用

有时候，结合这两种方法可以更好地满足需求。例如，可以在 mousemove 事件中存储最近一次的鼠标位置，然后在需要的时候调用 document.elementFromPoint 来获取那个位置下的元素，这样可以减少不必要的计算并提高性能。

          javascript
          
        
let lastMousePosition = { x: 0, y: 0 };

document.addEventListener('mousemove', function(event) {
    lastMousePosition.x = event.clientX;
    lastMousePosition.y = event.clientY;
});

function getElementAtLastMousePosition() {
    return document.elementFromPoint(lastMousePosition.x, lastMousePosition.y);
}

// 示例：在某个操作发生时调用
document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        const element = getElementAtLastMousePosition();
        console.log('Element under mouse when Enter was pressed:', element);
    }
});

选择哪种方法取决于你的具体应用场景和性能要求。对于简单的用例，mousemove 通常就足够了；而对于更复杂的需求或为了优化性能，document.elementFromPoint 是一个很好的工具。

Wilson@思源

js获取鼠标所在元素

使用 mousemove​ 事件

使用 document.elementFromPoint​

综合使用

使用 mousemove 事件

使用 document.elementFromPoint