js坐标的相关属性

1.clientX 和 clientY(相对于浏览器窗口的坐标)

表示事件发生时，鼠标指针相对于浏览器窗口可视区域左上角的水平和垂直坐标，不考虑页面滚动的影响。

2. pageX 和 pageY(相对于整个文档的坐标)

表示事件发生时，鼠标指针相对于整个文档（包含滚动部分）左上角的水平和垂直坐标。

3.screenX 和 screenY(相对于屏幕的坐标)

表示事件发生时，鼠标指针相对于用户屏幕左上角的水平和垂直坐标。

4.offsetX 和 offsetY(相对于目标元素的坐标)

表示事件发生时，鼠标指针相对于触发事件的元素（目标元素）左上角的水平和垂直坐标。

getBoundingClientRect()：这是元素的一个方法，会返回一个包含元素的大小及其相对于浏览器窗口可视区域位置的对象。该对象包含 top、right、bottom、left、width 和 height 属性。

const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
console.log('元素相对于浏览器窗口可视区域的顶部位置: ', rect.top);
console.log('元素相对于浏览器窗口可视区域的左侧位置: ', rect.left);