Question

可能重复：
Get element at specified position - JavaScript

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

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

您可以在此处查看包含评论的有效演示：http://jsfiddle.net/bkG2K/6/

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

想法？如果您有更好的解决根本问题的方法，请随意！

Answer 1

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

请参阅elementFromPoint w3c draft

并且，代码示例：

<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来提高应用程序性能。

Answer 2

我不知道内部实现是否有所不同，但是对于你想要实现的目标，预期的方法是.hover(...)，它需要在每次状态改变时执行两次回调。

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

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

2 个答案: