如何在浏览器中获取按钮的坐标？

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/