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

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/