Javascript中pageX / Y clientX / Y screenX / Y有什么区别？

Question

带有一些视觉提示的示例非常有用。

Answer 1

视觉线索代表：

屏幕→显示器的全屏（screenX/Y）
位置始终相对于物理屏幕的视口。

客户端→浏览器的客户端视口（clientX/Y）
如果单击左上角，则值将始终（0,0）独立于滚动位置。

文档→完整的文档/页面（pageX/Y）
请注意pageX对象are not standardized上的pageY / UIEvent。

所有值都以像素为单位。

Answer 2

<强> jsBin DEMO

客户端→浏览器窗口

clientX clientY =鼠标位置相对于浏览器视口边界的值（px）。
<子> 提示
即使您滚动文档，值也始终相同

---

PAGE→整个文档

pageX pageY =鼠标位置相对于文档最左/右“边”的值（px）。
<子> 提示
如果您垂直滚动文档（即），pageY值更改会导致文档中的新鼠标顶部位置。
值得注意的是：
event.pageY - event.clientY === document.documentElement.scrollTop（或jQuery的$("html, body").scrollTop()）

---

屏幕→您的屏幕

screenX和screenY是当前鼠标位置相对于物理屏幕的值（px）。
_{（这个没有提示;））}

Answer 3

一般来说，差异是：

• 第x / y页：x或y坐标相对于完全呈现的页面（即，它考虑页面/文档的整个高度和宽度，而不仅仅是屏幕上当前显示的内容）
• 屏幕x / y：相对于物理屏幕的x或y坐标。
• client x / y：相对于客户端（浏览器）窗口（或窗口内的iframe）的x或y坐标。

Here是一个可以动态测试差异的页面。