Question

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

但是，我需要知道从元素一直到屏幕一角的像素数。我发现了一些看似特定于IE的东西，但我希望这可以在尽可能多的浏览器中使用。

Answer 1

IE不支持

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

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

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

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

处理事件

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

或者可能使用该事件的坐标来校准mouseenter/leave事件。虽然您无法确定鼠标是从左侧，右侧，顶部还是底部进入。

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

有关浏览器属性兼容性的更多信息，请参阅PPK's Object Model tables。

Answer 2

我认为这不可能。

元素坐标相对于渲染页面的左上角。

窗口坐标是相对于屏幕的。

据我所知，没有任何内容将呈现页面的左上角与窗口的左上角相关联。所以没有办法考虑边框，滚动条，铬合金等等。所以我觉得你已经沉没了。

Answer 3

我不同意jvenema的回答。

我找到了一个适用于谷歌浏览器的解决方案，但我希望这也适用于许多其他浏览器（也许不适用于一些旧的互联网浏览器）。

在<script>代码中，声明了新的两个全局变量：pageX和pageY，其中包含var个关键字。

这些全局变量应始终存储渲染页面左上角的坐标相对于屏幕监视器的左上角，但为了实现此目标，{{1应该引用一个函数，它将pageX设置为event.screenX和event.clientX的区别，并将pageY设置为event.screenY和event.clientY的区别。

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

代码示例（仅限javascript）：

window.onmousemove

希望有所帮助！