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

Question

event.pageY

获取相对于整个文档高度的鼠标位置（

document.documentElement.offsetHeight

我假设）。

但是如何获取鼠标相对于当前视口的位置，即

document.documentElement.clientHeight

？

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

Answer 1

尝试使用

event.clientY

，无论滚动如何，它都应该始终返回正确的值

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

Answer 2

鼠标水平位置相对于视口可以通过以下方式接收：

document.addEventListener('mousemove', event => {
    console.log(event.clientY) // THIS should do what you want     
})

---

完整的选项列表是：

• e.clientX/Y：相对于viewport
的位置
• e.screenX/Y：相对于screen
的位置
• e.pageX/Y：相对于page的位置（如果页面滚动，则与视口不同）

---

运行下面的代码片段查看实时更新的不同位置：

const updateView = (e = {}) =>  document.getElementById('log').innerHTML = `
  <div>
    Relative to screen:<br>
    e.screenX: <b>${e.screenX || '0'}</b><br>
    e.screenY: <b>${e.screenY || '0'}</b>
  </div>
  <div>
    Relative to viewport:<br>
    e.clientX: <b>${e.clientX || '0'}</b><br>
    e.clientY: <b>${e.clientY || '0'}</b>
  </div> 
  <div>
    Relative to page (scroll to see the difference with viewport):<br>
    e.pageX: <b>${e.pageX || '0'}</b><br>
    e.pageY: <b>${e.pageY || '0'}</b>
  </div>
`

document.getElementById('content').innerHTML = `BIG CONTENT `.repeat(300)

document.addEventListener('mousemove', updateView)

updateView()

#log { display:flex;justify-content:center;position:fixed }
#log > div { flex: 1 1 0 }

<div id='log'></div>
<div id='content' style='opacity:.1'></div>

Answer 3

使用

event.clientY

获取鼠标相对于浏览器视口的位置（兼容性表）。

Answer 4

我处于类似的情况，我需要光标在视口中的坐标（因为我的页面是可滚动的）。

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

阅读了一些文档页面后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

Answer 5

如果您想要视口坐标，而不是屏幕、客户端或页面坐标，这就是答案...

const eleSvg = document.querySelector('svg');
let point = eleSvg.createSVGPoint();
var cursorpt =  point.matrixTransform(eleSvg.getScreenCTM().inverse());
point.viewport_x =  cursorpt.x
point.viewport_y =  cursorpt.y