简介

在编写前端页面时，我们经常需要获取HTML元素在浏览器窗口中的位置。JavaScript提供了几种不同的坐标系来获取元素的位置，其中包括Screen坐标系、客户端坐标系和页面坐标系。在这篇文章中，我们将探讨这些坐标系的区别，以及何时使用它们。

坐标系

screenXY

Screen坐标系是最简单的坐标系之一，它表示鼠标相对于用户的屏幕的位置，而不是相对于浏览器窗口或文档。当用户使用鼠标或触摸屏幕时，浏览器会返回一个Screen坐标值对象，其中包含了鼠标相对于屏幕左上角的X和Y坐标值。

clientXY

客户端坐标系是相对于浏览器窗口的坐标系。Client坐标系经常被用来检测用户鼠标在浏览器窗口内的位置。当用户移动鼠标时，浏览器会返回一个Client坐标值对象，其中包含了鼠标相对于当前可见窗口左上角的X和Y坐标值。

pageXY

页面坐标系可以将用户在页面上的鼠标或触摸事件转换为文档中的位置。当用户在文档中移动鼠标时，浏览器会返回一个Page坐标值对象，其中包含了鼠标相对于文档左上角的X和Y坐标值。

区别

坐标系不同

以上三种坐标系分别是屏幕坐标系、客户端坐标系和页面坐标系。我们在不同的场合下，选择适合的坐标系来描述事件发生的位置和范围。

计算方式不同

获取坐标值的计算方式也不同。screenX 和 screenY 是相对于屏幕坐标系的，clientX 和 clientY 是相对于客户端（视口）坐标系的，pageX 和pageY 是相对于文档坐标系的。

适用场合不同

一般来说，Screen坐标系和Client坐标系主要用于检测用户在浏览器窗口内的位置，而Page坐标系则是用于处理与页面元素相关的鼠标/触摸事件。

示例代码

下面是一个示例代码，用于演示如何使用这三种坐标系：

// 获取屏幕坐标系坐标值
document.addEventListener('mousemove', function(e) {
  console.log(`Screen X: ${e.screenX}, Screen Y: ${e.screenY}`);
});

// 获取客户端坐标系坐标值
document.addEventListener('mousemove', function(e) {
  console.log(`Client X: ${e.clientX}, Client Y: ${e.clientY}`);
});

// 获取文档坐标系坐标值
document.addEventListener('mousemove', function(e) {
  console.log(`Page X: ${e.pageX}, Page Y: ${e.pageY}`);
});

结论

通过本文，我们了解了屏幕坐标系、客户端坐标系和页面坐标系之间的差异，不同的坐标系因适用场景、计算方式不同而各有优劣。在编写前端程序时，我们应该选择最合适的坐标系来获取元素的位置，以确保程序的功能和性能都得到优化。