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

Question

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

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

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

- nice ass

Answer 1

尝试使用 event.clientY ，它应该始终返回正确的值，而不受滚动影响。

https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/clientY

- lostsource

---

这似乎与网页无关，我认为这是与客户端的显示器有关。因此，如果浏览器仅占用屏幕的右半部分，并且有人在网页的左上角单击，则返回的结果将与浏览器全屏并有人在相同位置单击时不同。 - Jordan

Answer 2

使用event.clientY可以获取相对于浏览器视口的鼠标位置（兼容性表）。

- Bergi

Answer 3

相对于视口的水平鼠标位置：

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

---

完整的选项列表如下：

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

---

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

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>

- TOPKAT

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

- Nikhil Anand

---

这与“视口”无关，而是相对于整个“文档”。 - Stefnotch

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

- mishrahsigni