技術分享 如何擷取Dom元素的X/Y座標(1)

當今已有很多的JS架構封裝了擷取Dom元素的座標的方法，我們可以直接使用，而這裡我更多的是希望透過這些方法，看到原始的擷取座標方式以及如何處理跨瀏覽器問題。

擷取Dom元素的X/Y座標

現在Web頁面的互動方式越來越多樣化，其中拖放頁面元素也是一種很常見的操作。在這類操作當中有兩個主要問題需要解決，一個是事件的註冊方式，一般處理拖放元素的事件順序是：捕獲滑鼠正鍵按下——註冊滑鼠移動事件——捕獲滑鼠正鍵抬起——登出滑鼠移動事件；另一個問題就是拖放元素的位置，即X/Y座標。這裡我主要來講述後面的問題：如何擷取一個Dom元素的座標。

當今已有很多的JS架構封裝了擷取Dom元素的座標的方法，我們可以直接使用，而這裡我更多的是希望透過這些方法，看到原始的擷取座標方式以及如何處理跨瀏覽器問題。

首先認識一下getBoundingClientRect方法，標準文法為：

 

  
oRect=object.getBoundingClientRect();  
  
 
 

Dom節點調用該方法可返回一個ClientRect類型的對象，該對象有四個屬性值：top、left、right、bottom，表示了該節點相對於可視瀏覽器可視地區的左上方位置的座標，看圖就能好理解：

座標說明圖1

補充一下，如果當前的元素已經超出可視地區，依然按照可視地區的左上方位置的座標來計算，2

座標說明圖2

這樣就可以簡單的擷取Dom元素在可視區裡的X/Y座標通過left和top屬性）。最後在計算上頁面捲軸的位移量就可以計算出元素在整個頁面中的X/Y座標了。頁面滾動位移量的計算在不同瀏覽器下有所不同，不過我們可以借鑒YUI裡面方法，設計一個通用的方式：

 

  
scrollLeft=Math.max(document.documentElement.scrollLeft,  
  
 
  
document.body.scrollLeft);  
  
 
  
scrollTop=Math.max(document.documentElement.scrollTop,  
  
 
  
document.body.scrollTop);  
 

在W3C標準下document.body.scrollTop和document.body.scrollLeft都為0，所以採用了上面相容的方式擷取頁面捲軸的位移量。