在前端开发中，经常会用到鼠标事件对象参数中的screenX/Y和pageX/Y，以及相对于文档窗口的clientX/Y。它们分别代表了鼠标位置相对于屏幕、文档窗口和当前可视区域的坐标值。下面我们将详细介绍它们之间的区别，并给出使用示例。
ScreenX/Y
screenX/Y 返回鼠标相对于用户屏幕左上角的水平和垂直坐标。这个坐标系是相对于整个电脑屏幕的，而不是单独针对当前浏览器窗口或文档。
document.addEventListener("mousemove", function(event) {
console.log(`Mouse position: ${event.screenX}, ${event.screenY}`);
});PageX/Y
pageX/Y 返回鼠标相对于文档内容区域左上角的水平和垂直坐标。这个坐标系是相对于整个文档页面的，而不是单独针对当前浏览器窗口。
document.addEventListener("click", function(event) {
console.log(`Clicked at: ${event.pageX}, ${event.pageY}`);
});ClientX/Y
clientX/Y 返回鼠标相对于当前文档窗口左上角的水平和垂直坐标。这个坐标系是相对于当前可视区域的，它会随着文档内容的滚动而改变。
document.addEventListener("mousemove", function(event) {
console.log(`Mouse position: ${event.clientX}, ${event.clientY}`);
});区别
在实际开发中，我们需要根据具体需求选择使用哪种坐标系。一般来说：
- 如果需要知道用户鼠标在整个屏幕上的位置，可以使用
screenX/Y。 - 如果需要知道用户鼠标在文档页面上的位置，可以使用
pageX/Y。 - 如果需要知道用户鼠标在当前可见窗口上的位置，可以使用
clientX/Y。
同时，需要注意以下几点：
- 在不同浏览器中，这些属性有时候可能会有不同的值或行为。
pageX/Y和clientX/Y的值都受到文档滚动的影响，因此在处理需要固定位置的场景（如拖拽）时应该特别小心。- 在移动设备上，这些属性的值将与触摸事件相关，而不是鼠标事件。
示例代码
下面是一个简单的示例，展示了如何使用pageX/Y和clientX/Y计算出鼠标在文档中移动的距离，并将其应用于一个元素的样式中。
-- -------------------- ---- -------
--------- -----
------
------
----------------------
-------
---- -
------ -----
------- -----
----------------- ----
--------- ---------
-
--------
-------
------
---- ---------------
--------
--- --- - -------------------------------
--- ------- -------
-------------------------------------- --------------- -
------ - ----------- - ---------------
------ - ----------- - --------------
-------------------------------------- -------------
---
------------------------------------ --------------- -
----------------------------------------- -------------
---
-------- ------------------ -
--- ---- - ----------- - -------
--- ---- - ----------- - -------
-- ----- - -- ---- - --
-- ----- - -- ---- - --
-------------- - ---- - -----
------------- - ----
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------