通过Javascript获取元素的屏幕坐标

Question

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

然而，我需要知道从该元素到屏幕角落有多少像素。我发现一些看起来专为IE设计的东西，但我希望在尽可能多的浏览器中运行此功能。

编辑添加图片：

- jerwood

Answer 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的对象模型表。

- Joel

---

你能否获取鼠标光标相对于其所在元素以及屏幕坐标的位置？这样校准就可以真正起作用了。 - jerwood

嗯，我再想一下，我更明白你的意思了。我认为校准肯定可行，只需要在他们更改浏览器外壳时重新进行即可。 - jerwood

谢谢你指引我正确的方向。从在页面中执行一个单击事件的角度思考，这样做会产生不同的效果。有了这个背景，我可以计算浏览器的 chrome 偏移量。而且这在 IE 中也有效。这是我想出来的代码：(event.screenY - event.pageY) + $('#element').offset().top这将返回所需元素的屏幕 Y 坐标。 - jerwood

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

---

我不喜欢这个解决方案——写下数百万次鼠标移动——它应该是浏览器的事情...但幸运的是，我不是唯一一个使用实用主义方法的人。所以请投赞成票。而且我正在运行一个复杂的东西（HTML5画布和SVG的组合，获取CTM等），然后“摆弄”这些简单的信息！如果我无法获取屏幕坐标，那么getSceenCTM有什么用呢？ - halfbit

Answer 3

我认为这是不可能的。

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

窗口坐标相对于屏幕。

据我所知，没有任何东西将渲染页面的左上角与窗口的左上角联系起来。因此，无法考虑边框、滚动条、chrome等因素。所以我认为您在这个问题上已经失败了。

- Jerod Venema

Answer 4

这是我正在做的方式。

const pos = {x:number, y:number}

const scrollY = window.scrollY;

const targetArea = window?.document?.elementFromPoint(
      pos.x,
      pos.y - scrollY
 );

这并没有考虑到 X 滚动因素。我认为这基本上就是 @joel 11 年前说的话。

- Thomas Valadez