原生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。