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

时间:2013-02-05 21:50:12

标签: javascript javascript-events height viewport

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

但是如何获取相对于当前视口的鼠标位置,document.documentElement.clientHeight

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

3 个答案:

答案 0 :(得分:38)

尝试使用始终返回正确值的event.clientY,无论滚动

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

答案 1 :(得分:8)

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

答案 2 :(得分:2)

我处在类似的情况下,我需要光标的视点为视口(因为我的页面是可滚动的)。

我在这里尝试了其他答案,一旦屏幕滚动,它们似乎就不起作用了(它们在不可滚动的页面上效果很好)。

阅读了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