如何在javascript中获取鼠标相对于窗口视口的位置？

Posted 2023-03-06

【中文标题】如何在javascript中获取鼠标相对于窗口视口的位置？

【英文标题】：How to get the mouse position relative to the window viewport in javascript?

【发布时间】：2013-01-20 23:24:15

【问题描述】：

event.pageY 获取相对于整个文档高度的鼠标位置（我假设为document.documentElement.offsetHeight）。

但是如何获得鼠标相对于当前视口的位置，即document.documentElement.clientHeight？

例如，如果浏览器窗口大小为 720 像素高度，我向下滚动 3 页并将鼠标保持在窗口中间，位置应该是“360”，而不是 1800（720 x 3 - 720 / 2).

【参考方案1】：

尝试使用event.clientY，无论滚动如何，它都应该始终返回正确的值

https://developer.mozilla.org/en-US/docs/DOM/event.clientY

【讨论】：

这似乎与网页无关。我认为这与客户的显示器有关。因此，如果浏览器只占据屏幕的右半部分，并且有人点击了网页的左上角，那么它会返回不同于浏览器全屏并且有人点击相同位置的内容。跨度>

【参考方案2】：

使用event.clientY 获取相对于浏览器视口的mouse position (Compatibility table)。

【参考方案3】：

我遇到了类似的情况，我需要光标的坐标 w.r.t 视口（因为我的页面是可滚动的）。

我在这里尝试了其他答案，一旦滚动屏幕，它们似乎就不起作用（它们适用于不可滚动的页面）。

在阅读了https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent 的一些文档页面后 我发现在使用可滚动页面时，如果您需要当前视口的 X 和 Y 坐标（即即使滚动），最好使用 event.pageX 代替。

var pageX = MouseEvent.pageX;

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX