这三个坐标系在前端开发中经常用到，它们之间的区别在于参照点的不同：
-
屏幕坐标 (Screen Coordinates): 指的是相对于整个屏幕的坐标系。原点 (0,0) 位于屏幕的左上角。屏幕坐标的单位是像素，值会随着屏幕分辨率的变化而变化。例如，
screenX和screenY属性可以获取鼠标指针相对于整个屏幕的坐标。 -
客户区域/可视窗口坐标 (Client/Viewport Coordinates): 指的是相对于浏览器可视窗口的坐标系。原点 (0,0) 位于可视窗口的左上角。可视窗口指的是不包括浏览器工具栏、菜单栏、滚动条等部分的区域，也就是用户实际看到的网页内容区域。
clientX和clientY属性可以获取鼠标指针相对于可视窗口的坐标。当页面滚动时，元素在可视窗口中的位置会发生变化，因此客户区域坐标也会随之改变。 -
页面坐标 (Page Coordinates): 指的是相对于整个文档的坐标系。原点 (0,0) 位于文档的左上角。即使页面发生了滚动，元素在文档中的位置不变，因此页面坐标也不会改变。
pageX和pageY属性可以获取鼠标指针相对于整个文档的坐标。需要注意的是，pageX和pageY属性在一些较老的浏览器中可能不被支持。可以使用clientX/clientY加上页面滚动偏移量来模拟。
如何获取滚动偏移量：
可以使用以下方法获取页面的水平和垂直滚动偏移量：
window.pageXOffset或window.scrollX： 获取水平滚动偏移量。window.pageYOffset或window.scrollY： 获取垂直滚动偏移量。
总结：
| 坐标系 | 参照点 | 获取方式 | 受滚动影响 |
|---|---|---|---|
| 屏幕坐标 | 屏幕左上角 | screenX, screenY |
否 |
| 客户区域/可视窗口坐标 | 可视窗口左上角 | clientX, clientY |
是 |
| 页面坐标 | 文档左上角 | pageX, pageY |
否 |
示例：
假设鼠标指针位于可视窗口的 (100, 50) 处，页面水平向右滚动了 20px，垂直向下滚动了 30px。
- 屏幕坐标：取决于鼠标在屏幕上的实际位置，无法根据上述信息确定。
- 客户区域坐标： (100, 50)
- 页面坐标： (120, 80) (100 + 20, 50 + 30)
希望以上解释能够帮助你理解这三种坐标系的区别。
