最近的工作涉及到比较多和坐标相关的东西，比如 MouseEvent 的坐标属性，或是 Dom 的位置等，属性比较多，容易搞混！
MouseEvent
MouseEvent
- clientX/clientY：相对客户端窗口的 X/Y 坐标
layerX/layerY：已弃用，忘记它吧- offsetX/offsetY：相对于事件源元素的 X/Y 坐标，注意相对于目标 target，而非 currentTarget
- pageX/pageY：相对于整个文档的 X/Y 坐标
- screenX/screenY：相对用户屏幕的 X/Y 坐标
- x/y：clientX/clientY 的别名（所以忘记它吧）
DomElement
DomElement 属性
- clientHeight/clientWidth
- 包括 padding 但不包括 border，也就是元素的 padding box 尺寸，如果有滚动条，也不包含滚动条
- 注意：inline 元素没有可视宽高的说法（clientHeight 和 clientWidth 永远是 0）
- clientLeft/clientTop
- 边框的左边框宽度/上边框宽度
- offsetHeight/offsetWidth
- 包括 padding 和 border，也就是元素的 border box 尺寸，效果与 e.getBoundingClientRect() 相同
- offsetLeft/offsetTop
- 元素的外边缘距离已定位的父容器的左边距离/上边距离
- scrollHeight/scrollWidth
- content + padding + 溢出内容的尺寸 = clientXXX + 移除内容尺寸
- scrollLeft/scrollTop
- 滚动条左边/上方卷去的高度
- getClientRects：返回一个列表，里面包含元素对应的每一个盒所占据的客户端矩形区域，可以用 x、y、width、height、top、left、right、bottom 来获取它的位置和大小
- getBoundingClientRect：这个 API 更接近我们脑海中的元素盒的概念，返回元素对应的所有盒的包裹的矩形区域，需要注意，这个 API 获取的元素会包括当 overflow 为 visible 时的子元素区域