3

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

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

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

您可以在此处查看带有评论的工作演示：http: //jsfiddle.net/bkG2K/6/

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

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

4

2 回答 2

1

您可以使用原生 JavaScriptelementFromPoint(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 代替以增强应用程序性能。

于 2011-06-02T11:35:56.233 回答
0

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

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

于 2011-06-02T11:17:52.423 回答