元素的屏幕坐标，通过Javascript

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;

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

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

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

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

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

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

Answer 2

我不同意的回答。

我已经找到了一个在google chrome上对我有效的解决方案，但我希望这也能在许多其他浏览器上起作用(可能在一些旧的互联网浏览器上不起作用)。

在<script>标记内部，使用关键字var声明两个新的全局变量: pageX和pageY。

这些全局变量应该始终存储呈现页面的左上角相对于屏幕监视器左上角的坐标，但是为了实现这个目标，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>

希望这能有所帮助！

Answer 3

我认为这是不可能的。

元素坐标相对于所呈现页面的左上角。

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

据我所知，渲染页面的左上角与窗口的左上角没有任何关系。所以没有办法解释边框，滚动条，铬合金等等，所以我认为你在这一点上失败了。