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

我正在寻找一种获取浏览器中按钮坐标的方法。

---

提前谢谢

要在浏览器中获取按钮的坐标，首先需要编写一个选择器，以获取您感兴趣的特定按钮的坐标

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}

---

您需要使用以下代码来获取按钮的坐标

<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>

函数getCoords（）{
var mainEvent=事件？事件：window.event；
警报（“此按钮单击发生在：X（“+mainEvent.screenX+”）处）
和Y（“+mainEvent.screenY+”）；
}

下面是一个工作示例：

可能重复的