如何在任意鼠标位置(x，y）检测元素

How can I detect the element(s) at an arbitrary mouse position (x,y)?

本文关键字：检测 元素 任意 鼠标 位置      更新时间：2023-09-26

可能重复：
在指定位置获取元素-JavaScript

如何检测任意鼠标位置（x，y）的元素？

我使用mouseenter/mouseleave来突出显示悬停项目。不幸的是，当鼠标隐式移动时，这两个选项都不会触发，这会导致高亮显示错误的项目。隐式移动鼠标的一个示例是使用箭头键或轨迹板滚动页面。

你可以在这里看到一个带有评论的工作演示：http://jsfiddle.net/bkG2K/6/

我的解决方法是每隔一段时间检查一次鼠标的位置，或者如果可能的话，在滚动后立即检查，并根据当前鼠标坐标更新悬停状态。但我不确定如何找到给定X，Y的DOM元素。

想法？如果你对根本问题有更好的解决方案，请放心！

您可以使用本地JavaScript elementFromPoint(x, y)方法，该方法返回视口中坐标x、y处的元素。

请参阅elementFromPoint w3c草案

还有一个代码示例：

<html>
<head>
<title>elementFromPoint example</title>
<script type="text/javascript">
function changeColor(newColor)
{
 elem = document.elementFromPoint(2, 2);
 elem.style.color = newColor;
}
</script>
</head>
<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>

您可以使用setInterval()来连续检查元素的悬停事件，但不建议使用.hover(...)和css来提高应用程序的性能。

我不知道内部实现是否不同，但对于您试图实现的目标方法是.hover(...)，它在每个状态更改中需要两个回调来执行。

或者，您可以在光标位置模拟setInterval()和.mousemove()事件（尽管您应该进行浏览器检查，并且只在有问题的浏览器中使用它，因为这是一种黑客攻击，并且应该尽可能少的人接触它）

相关文章：