Question

请注意，jQuery position功能和Javascript＆＃39; getBoundingClientRect都不能满足我的要求。

我试图获取元素相对于用户屏幕左上角坐标的位置。

我主要是为了解决Google Chrome的问题。我希望任何可以引导我走上正确道路的答案。

Answer 1

使用jQuery .offset()函数，您可以获取浏览器页面左上角的坐标：

var offset = $("selector").offset();

将其与Javascript window.screenX and window.screenY窗口属性相结合，您可以计算元素的位置作为屏幕顶部/左侧的偏移量：

var screenY = offset.top + window.screenX;
var screenX = offset.left + window.screenY;

请注意，window.screenX和window.screenY是大多数浏览器的标准配置，但IE版本8及之前使用的是window.screenTop和window.screenLeft。如果您需要与IE8或更早版本兼容，请务必考虑到这一点。

另请注意，您可能需要考虑当前滚动位置，在这种情况下，您将使用jQuery .scrollTop()和.scrollLeft()方法并从偏移值中减去。

不幸的是，这不会考虑窗口边框或工具栏。为此，您可以捕获鼠标移动并存储鼠标位置，该位置以实际屏幕坐标显示。

此解决方案的核心如下，它安装了一次性使用鼠标处理程序来确定页面的实际屏幕坐标：

var pageX;
var pageY;

window.onmousemove = setMouseCoordinates;

function setMouseCoordinates (e) {
    window.onmousemove = null;

    pageX = e.screenX - e.clientX;
    pageY = e.screenY - e.clientY;
}

然后，您可以使用这些存储的值来计算任何Javascript元素的偏移量：

x = pageX + elem.offsetLeft;
y = pageY + elem.offsetTop;

或jQuery元素：

x = pageX + elem.position().left;
y = pageY + elem.position().top;

查看小提琴以查看其实际效果：https://jsfiddle.net/mgaskill/bpqzct3f/

Answer 2

我认为HTMLElement.offSetLeft和HTMLElement.offSetTop正是您所寻找的。

Javascript获取Element相对于屏幕左上角的位置

2 个答案: