如何检测任意鼠标位置 (x,y) 处的元素？

发布于 2024-11-13 07:03:47 字数 597 浏览 3 评论 0原文

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

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

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冰之心 2024-11-20 07:03:47

您可以使用本机 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 来提高应用程序性能。

You can use the native JavaScript elementFromPoint(x, y) method, that returns the element at coordinates x,y in the viewport.

See the elementFromPoint w3c draft

And, a code sample:

<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>

You can use setInterval() to continuously check the element's hover event but it's not recommended, try to use .hover(...) and css instead to enhance the application performance.

回复收藏 0 原文