DOM 里的“坐标”基础

方法/属性	参照物	是否受滚动影响	主要用途
`getBoundingClientRect()`	视口 (Viewport)	是	获取元素在视口中的位置和大小
`e.clientX`, `e.clientY`	视口 (Viewport)	否	鼠标在当前可见窗口中的位置
`e.pageX`, `e.pageY`	文档 (Document)	是	鼠标在整个 HTML 文档中的位置
`e.offsetX`, `e.offsetY`	事件目标元素 (Padding edge)	否 (相对而言)	鼠标在目标元素内部的相对位置
`e.screenX`, `e.screenY`	屏幕 (Screen)	否	鼠标在整个物理屏幕上的位置 (较少用于布局)

获取元素坐标：`getBoundingClientRect()`

getBoundingClientRect() 方法返回一个 DOMRect 对象，提供了元素的大小及其相对于视口（viewport）的位置信息。这是获取元素位置最常用和最推荐的方法之一。

相对于视口： 这些坐标都是相对于浏览器当前可见窗口的左上角而言的，而不是整个文档。这意味着当页面滚动时，top 和 left (以及 x 和 y) 的值会改变。
浮点数值： 返回的坐标值可能是小数，特别是在高 DPI 屏幕或者浏览器缩放的情况下。

当发生鼠标事件（如 click, mousemove, mousedown, mouseup 等）时，事件处理函数会接收到一个事件对象 (通常命名为 e 或 event)。这个对象包含了事件的详细信息，其中包括鼠标指针的坐标。

常用的鼠标坐标属性有：

e.clientX 和 e.clientY:
- 参照物： 浏览器视口的左上角。
- 这些值不受页面滚动的影响，即使用户滚动了页面，只要鼠标在视口内的位置不变，这些值就不会变。
e.pageX 和 e.pageY:
- 参照物： 整个 HTML 文档的左上角。
- 这些值会考虑页面的滚动。如果页面向下滚动了 100px，e.pageY 的值会比 e.clientY 大 100px (假设鼠标在视口内的垂直位置不变)。
e.offsetX 和 e.offsetY:
- 参照物： 事件目标元素（event.target）的内边距（padding edge）左上角。
- 如果你想知道鼠标点击在元素内部的哪个具体位置，这两个属性非常有用。
e.screenX 和 e.screenY (较少用于页面布局，但了解一下有好处):
- 参照物： 用户整个屏幕的左上角。
- e.screenX: 鼠标指针在屏幕上的水平坐标。
- e.screenY: 鼠标指针在屏幕上的垂直坐标。
- 即使浏览器窗口移动了，只要鼠标在屏幕上的位置不变，这些值也不会变。