元素的屏幕坐标，通过 Javascript

Question

我正在尝试获取浏览器窗口中某个元素的屏幕坐标（即，相对于屏幕左上角的坐标）。很容易获得窗口的大小和位置 (screenX, screenY) 并且很容易（使用 jQuery）获得元素的偏移量 ($(‘element’).offset().left)。

但是，我需要知道从元素一直到屏幕角落有多少像素。我发现了一些似乎特定于 IE 的东西，但我希望它能在尽可能多的浏览器中工作。

编辑添加图片：

原文由 jerwood 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

window.screenX/Y IE 不支持。但对于其他浏览器，位置的近似值是：

 var top = $("#myelement").offset().top + window.screenY;
var left = $("#myelement").offset().left + window.screenX;

确切位置取决于可见的工具栏。您可以使用 outer/innerWidth 和 outer/innerHeight 对象的 window 属性来近似一点。

IE 没有提供太多窗口属性，但奇怪的是，单击事件对象将为您提供单击的屏幕位置。所以我想你可以有一个校准页面，要求用户“点击红点”并处理事件

function calibrate(event){
    var top = event.screenY;
    var left = event.screenX;
}

或者可能使用 mouseenter/leave 事件，使用该事件的坐标进行校准。尽管您很难确定鼠标是从左侧、右侧、顶部还是底部进入的。

当然，一旦他们移动屏幕，您就需要重新校准。

有关浏览器属性兼容性的更多信息，请参阅 PPK 的对象模型表。

原文由 Joel 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

我不同意 jvenema 的回答。

无论如何，我已经找到了一个适用于我的谷歌浏览器的解决方案，但我希望它也适用于许多其他浏览器（可能不适用于某些旧的 Internet Explorer）。

在 <script> 标签中声明了两个名为 pageX 和 pageY 的新 全局 变量，并带有 var 关键字。

这些全局变量应该总是存储 渲染页面 左上角相对于屏幕监视器左上角的坐标，但是为了实现这个目标， window.onmousemove 应该引用一个函数将 pageX 设置为 event.screenX 和 event.clientX 的差值，将 pageY 设置为 event.screenY 和 event.clientY 的差值。

然后你需要做的就是获取一个元素的坐标（相对于渲染页面的左上角）并添加 pageX 和 pageY。这些表达式的结果将是该元素相对于 屏幕监视器 左上角的坐标！

代码示例（仅限 javascript）：

 <script>
    var pageX;
    var pageY;
    window.onmousemove = function (e) {
       pageX = e.screenX - e.clientX;
       pageY = e.screenY - e.clientY;
    }
    function getScreenCoordinatesOf(obj) {
       var p = {};
       p.x = pageX + obj.clientLeft;
       p.y = pageY + obj.clientTop;
       return p;
    }
</script>

希望有帮助！

原文由 user2133061 发布，翻译遵循 CC BY-SA 3.0 许可协议