原生JS中获取位置的方案总结

• 获取鼠标当前位置

  • clientY、clientX： 鼠标当前位置 相对于 浏览器可视区域顶部、浏览器可视区域左部 的位置；
  • pageY、pageX： 鼠标当前位置 相对于 文档顶部、文档左部的位置；
  • screenY、screenX：鼠标当前位置 相对于 屏幕顶部、屏幕左部的位置；
  • offsetY、offsetY：鼠标的当前位置 相对于 目标节点的内填充边顶部、内填充边左部的位置。内填充边意思是不包含border，但包含padding，类似于padding-box。
  • 他们均是鼠标事件的一级属性 ，如e.clientY

• 获取某一元素的区域

  Element.getBoundingClientRect()
  

  • 该方法获取的是该元素相对于视口的位置
  • top、bottom、left、right：分别是该元素的元素框（盒模型）上下左右位置距视口的距离。其中，top和bottom是距视口上边界的距离，left和right是距视口左边界的距离。
  • width、height：分别是该元素的元素框（盒模型）的宽度和高度，这个宽高是border以内并且包含border，类似于border-box。