screenXY、clientXY 和 pageXY 之间有什么区别？

在Web开发中，经常需要获取元素相对于屏幕、浏览器视口或文档的坐标信息。通常可以通过三个坐标系获得这些数据：screen、client 和 page 坐标系。下面将介绍这三个坐标系以及它们之间的区别。

screen 坐标系

screen 坐标系表示元素相对于整个屏幕的位置。它的原点在屏幕左上角，并且坐标值与屏幕的分辨率相同。

document.addEventListener('click', function(e) {
  console.log(`screenX: ${e.screenX}, screenY: ${e.screenY}`);
});

client 坐标系

client 坐标系表示元素相对于浏览器视口的位置。它的原点在视口左上角，并且坐标值与视口的大小相同。如果页面没有滚动，client 坐标系和 screen 坐标系的值将相同。

document.addEventListener('click', function(e) {
  console.log(`clientX: ${e.clientX}, clientY: ${e.clientY}`);
});

page 坐标系

page 坐标系表示元素相对于整个文档的位置。它的原点在文档左上角，并且坐标值与整个文档的大小相同。如果页面有滚动，page 坐标系的值将随着滚动而变化。

document.addEventListener('click', function(e) {
  console.log(`pageX: ${e.pageX}, pageY: ${e.pageY}`);
});

在开发过程中，需要根据具体需求选择合适的坐标系来获取元素的位置信息，以确保其正确性。