如何在瀏覽器中獲取按鈕的座標？

Question

我正在尋找一種方法來獲得例如瀏覽器中的按鈕。 在此先感謝。

Answer 1

要獲得瀏覽器中按鈕的座標，您需要先編寫一個選擇器以獲取您感興趣的特定按鈕，以找到其座標。

var button = document.querySelector('button') 

要獲得座標，它取決於您是否想要座標引用某個其他元素。如果座標爲參照本身，那麼這將是這麼簡單

{left: 0, top: 0, bottom: button.offsetHeight, right: button.offsetWidth} 

如果你想擁有它的參考，如窗口，例如不同的元素，你可以遞歸遍歷該按鈕的父母，直到窗口已到達

var top = button.offsetTop; 
var left = button.offsetLeft; 
var height = button.offsetHeight; 
var width = button.offsetWidth; 
while(button.offsetParent && button.offsetParent != window){ 
    button = button.offsetParent; 
    top += button.offsetTop; 
    left += button.offsetLeft; 
} 
var bottom = top + height; 
var right = left + width; 
return {left: left, top: top, bottom: bottom, right: right} 

Answer 2

您需要使用以下代碼來獲取按鈕的座標。

<input type="button" id="button" value="display" onclick="getCoords()"> 
<script> 
    function getCoords() { 
     var mainEvent = event ? event : window.event; 

     alert("This button click occurred at: X(" + mainEvent.screenX + ") 
      and Y(" + mainEvent.screenY +  ")"); 
    } 
</script> 

這裏是工作示例：http://jsfiddle.net/Bnuy7/1692/