坐标

MouseEvent 中的坐标属性

属性	描述
offsetX, offsetY	鼠标指针相对于触发事件的元素的坐标（元素的左上角为原点）。
clientX, clientY	鼠标指针相对于浏览器视口的坐标（不包括滚动条和页面滚动）。
x, y	与 clientX 和 clientY 相同，是它们的别名。
pageX, pageY	鼠标指针相对于整个文档的坐标（包括页面滚动）。
screenX, screenY	鼠标指针相对于屏幕的坐标（整个屏幕的左上角为原点）。

getBoundingClientRect()

el.getBoundingClientRect() 返回最小矩形的窗口坐标，该矩形将 el 作为内建 DOMRect 类的对象。

主要的 DOMRect 属性：

• x/y —— 矩形原点相对于窗口的 X/Y 坐标，
• width/height —— 矩形的 width/height（可以为负）。
• 此外，还有派生（derived）属性：
  • top/bottom —— 顶部/底部矩形边缘的 Y 坐标，
  • left/right —— 左/右矩形边缘的 X 坐标。

示例：

let elem = document.querySelector('div')
let rect = elem.getBoundingClientRect()
for (var key in rect) {
  if (typeof rect[key] !== 'function') {
    let para = document.createElement('p')
    para.textContent = `${key} : ${rect[key]}`
    document.body.appendChild(para)
  }
}