当我们开发前端应用时，经常需要确定用户鼠标指针在页面的哪个元素上。这个问题看起来很简单，但实际上有很多细节需要考虑。本文将详细介绍如何确定鼠标指针在JavaScript顶部的哪个元素，并提供示例代码和指导意义。
鼠标事件模型
在开始之前，让我们先了解一下鼠标事件模型。当用户在浏览器中进行鼠标操作时，会发生一系列鼠标事件。这些事件包括：
mousedown：鼠标按下mouseup：鼠标松开mousemove：鼠标移动click：鼠标点击dblclick：鼠标双击
每个鼠标事件都有一个关联的元素，表示该事件发生在哪个元素上。这个元素称为事件目标（event target）。通常情况下，事件目标是接收事件的元素。例如，当用户单击按钮时，按钮就是事件目标。
事件冒泡和捕获
在了解事件目标之前，我们还需要了解两个重要概念：事件冒泡和事件捕获。
事件冒泡是指在触发事件后，事件会从事件目标开始向上冒泡到祖先元素。例如，当用户单击按钮时，click事件会从按钮开始向上冒泡到包含按钮的元素、再到更高层级的祖先元素，直到达到文档根节点。
事件捕获则是相反的过程。事件会从文档根节点开始向下捕获，直到到达事件目标。
默认情况下，事件使用冒泡机制。但是可以通过在注册事件处理程序时指定选项来强制使用捕获或禁用冒泡。
确定鼠标指针所在的元素
现在让我们来看看如何确定鼠标指针在JavaScript顶部的哪个元素。
首先，我们可以使用event.target属性来获取当前事件的目标元素。例如，当用户单击一个按钮时，event.target就是该按钮元素。
但是，如果我们需要确定鼠标指针所在的元素而不是事件目标元素怎么办呢？这时候可以使用Document.elementFromPoint()方法。该方法接受两个参数：x和y坐标（相对于文档）。它返回位于指定坐标下的顶部元素。
下面是一个示例代码：
document.addEventListener('mousemove', function(e) {
const x = e.clientX;
const y = e.clientY;
const elem = document.elementFromPoint(x, y);
console.log('Mouse is over element:', elem);
});在这个示例中，我们使用mousemove事件来捕获鼠标移动。然后，我们通过e.clientX和e.clientY获取鼠标指针的坐标。最后，我们使用Document.elementFromPoint()方法来获取位于该坐标下的顶部元素，并将其打印到控制台中。
需要注意的是，Document.elementFromPoint()方法仅适用于可见元素。因此，如果鼠标指针在不可见的元素上方，该方法将无法返回正确的结果。
指导意义
确定鼠标指针在JavaScript顶部的哪个元素是前端开发中非常常见的任务。了解事件冒泡和捕获以及Document.elementFromPoint()
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12459