DOM 元素的位置信息

$event 通常指事件处理函数中的事件对象（如 Vue.js 中的事件参数），而 $event.el 一般是指触发事件的 DOM 元素（即 event.target 或 event.currentTarget）。获取元素的位置信息时，常用的属性和方法如下：

一、事件对象中的坐标信息（与鼠标 / 触摸事件相关）

当事件为鼠标点击、拖拽等操作时，事件对象本身会包含鼠标位置相关的坐标，这些坐标以 $event 的属性存在（非 $event.el 的属性，但与元素位置相关）：

1. $event.clientX 和 $event.clientY

   • 含义：鼠标指针在浏览器视口（viewport）中的水平 / 垂直坐标（不考虑滚动）。
   • 示例：点击元素时，clientX 是鼠标到视口左边缘的距离，clientY 是到视口上边缘的距离。

2. $event.pageX 和 $event.pageY

   • 含义：鼠标指针在整个文档（包括滚动部分）中的水平 / 垂直坐标。
   • 示例：若页面向下滚动了 100px，pageY 会包含这 100px 的偏移，而 clientY 不会。

3. $event.offsetX 和 $event.offsetY

   • 含义：鼠标指针相对于事件目标元素（event.target）内边距边界的水平 / 垂直坐标。
   • 示例：若元素有内边距，offsetX 从内边距的左上角开始计算。

4. $event.target.getBoundingClientRect()

   • 含义：获取元素在视口中的位置矩形，包含以下属性：
     • left：元素左边缘到视口左边缘的距离
     • top：元素上边缘到视口上边缘的距离
     • right:元素右边缘到视口的距离
     • bottom:元素下边缘到视口的距离
     • width、height：元素宽高

二、元素自身的位置属性（通过 $event.el 获取）

若要直接获取元素在文档中的位置，需通过 DOM 元素的属性和方法：

1. $event.el.offsetLeft 和 $event.el.offsetTop

   • 含义：元素相对于其 定位祖先元素（position 不为 static） 的左 / 上边缘距离。
   • 注意：若祖先元素都未定位，则相对于文档左上角。

2. $event.el.clientLeft 和 $event.el.clientTop

   • 含义：元素左 / 上边框的宽度（通常用于获取边框尺寸），若元素无边框则为 0。

3. $event.el.scrollLeft 和 $event.el.scrollTop

   • 含义：元素内容向左 / 向上滚动的距离（常用于滚动事件）。

4. $event.el.getBoundingClientRect()

   • 同事件对象中的 getBoundingClientRect()，返回元素在视口中的位置矩形（见上文）。

5. $event.el.getClientRects()

   • 含义：返回元素所有部分的矩形集合（如多行文本的每一行），常用于复杂布局元素。