元素的屏幕坐标，通过 Javascript答案

【问题标题】：Screen Coordinates of a element, via Javascript元素的屏幕坐标，通过 Javascript
【发布时间】：2010-02-25 21:32:38
【问题描述】：

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

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

编辑添加图片：

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

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

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

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

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

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

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

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

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

【讨论】：

你能得到鼠标光标相对于它所在元素的位置，以及屏幕坐标吗？然后校准就可以真正起作用了。
嗯，想多了，我更明白你的意思了。我认为校准肯定会起作用，而且只有在他们更改浏览器 chrome 时才需要重做。
感谢您为我指明正确的方向。考虑在页面中的点击事件中执行此操作会有所不同。在这种情况下，我可以计算浏览器镀铬偏移量。这在 IE 中有效。这就是我想出的： (event.screenY - event.pageY) + $('#element').offset().top 这给出了相关元素的屏幕 Y。

【解决方案2】：

我不同意 jvenema 的回答。

无论如何，我在 google chrome 上找到了适合我的解决方案，但我希望这也适用于许多其他浏览器（可能不适用于某些旧的 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>

希望有帮助！

【讨论】：

我不喜欢这个 - 解决方案 - 写数百万次鼠标移动 - 它应该是浏览器的事情......但幸运的是，我不是唯一使用务实方法的人。所以投票。 - 我有一个复杂的东西在这里运行（HTML5 Canvas 和 SVG 的组合获取 CTM 等等，然后用这个简单的信息“摆弄”！如果我无法获得屏幕坐标，getSceenCTM 有什么帮助？

【解决方案3】：

我认为这是不可能的。

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

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

据我所知，渲染页面的左上角与窗口的左上角没有任何关系。所以没有办法考虑边框、滚动条、chrome 等。所以我认为你已经沉迷于这个了。

【讨论】：