JavaScript元素相对于屏幕的位置

Question

我需要获得元素相对于屏幕或窗口左上角的点（点（window.screenX，window.screenY）的位置。

为什么？我需要桌面应用程序才能在该位置上绘制一些内容。我能够得到整个窗口和文档的正，但是我无法获得窗口顶部和文档顶部之间的偏移量。

例如，如果用户打开了浏览器的调试控制台，则无法使用window.outerHeight - window.innerHeight。

有什么想法吗？在SP上有一些关于它的文章，但是相对于文档的视图端口，它们都对我有用。

编辑：其他可能的解决方法是，获取文档的screenX / Y值

谢谢

Answer 1

如果您不反对使用插件，则jquery具有.position（）方法，因此您可以对文档进行处理

UPDATED解决方案

// get element position relative to the document
var pos = $("#element").position();
var elePosX = pos.left;
var elePosY = pos.top;

// get window position relative to screen
var winPosX = window.screenX;
var winPosY = window.screenY;

// calculate the height of the navigation/toolbar
var navHeight = window.outerHeight - window.innerHeight;

// absolute x relative to the screens top left is the
//windows x position + the elements x position
var absX = winPosX + elePosX;

// absolute y relative to the screens top left is the
// windows y position + the height of the nav bar + the
// elements y position
var absY = winPosY + navHeight + elePosY;

// output values
console.log({"x": absX, "y": absY});

Answer 2

我一直在寻找相同的东西，而且令人惊讶的是，这很难实现。

[只有Firefox解决方案-window.mozInnerScreenX和window.mozInnerScreenY将为您提供相对于屏幕的视口的左侧和顶部。

据我所知，对于其他浏览器，您需要监听第一个鼠标或触摸事件。这些事件包含事件的屏幕坐标和客户端坐标，可用于计算视口的屏幕坐标。

innerScreenX = event.screenX - event.clientX;
innerScreenY = event.screenY - event.clientY;

注意，在多监视器设置的情况下，屏幕坐标可能是意外值（如-ve值）。>

Answer 3

您可能想研究window的以下属性...