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

Question

请注意，jQueryposition函数和Javascript的getBoundingClientRect都不能满足我的要求。

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

我主要是想弄清楚谷歌铬。任何能引导我走上正确道路的答案，我都将不胜感激。

Answer 1

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

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

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

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

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

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

不幸的是，这将不考虑窗口边框或工具栏。要做到这一点，您可以捕捉鼠标移动并存储鼠标位置，该位置以实际屏幕坐标给出。

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

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.off SetTop是您想要的。