有趣的问题：鼠标的绝对坐标与窗口大小无关

Posted 2023-04-14

【中文标题】有趣的问题：鼠标的绝对坐标与窗口大小无关

【英文标题】：Interesting Problem: Absolute Coordinates of Mouse Regardless of Window Size

【发布时间】：2011-07-27 05:44:52

【问题描述】：

这可能是一道数学题而不是编程题，但我们拭目以待。

我正在尝试构建一个简单的 javascript 点击跟踪器，可以添加到任何网站，它将其数据绘制到热图上。

问题

如果我在 1024x768 的窗口中显示的网页上捕获点击事件的 x/y 坐标，并尝试将其映射到以 1280x1024（或任何其他尺寸）显示的热图上，那么有一个很好的点击可能不会显示在正确的位置。

例如，如果网页的内容在 960 像素宽的 div 内居中，因为捕获的 x,y 坐标是从窗口左上角的原点测量的，所以坐标在物理空间。

我可以使用两种屏幕尺寸之间的差异在所有屏幕的中心创建一个原点并从那里进行测量，但是对于未相对于屏幕中心定位的任何内容，我都会遇到同样的问题页面。

有没有办法在不知道浏览器窗口大小或页面上的内容的情况下开发一组页面上元素的绝对坐标？

我知道我可以将点击绑定到 DOM 元素。没关系，我可能会走那条路，但现在我发现了这个问题，我很好奇可能的解决方案。

【问题讨论】：

换种说法，您是否想要一个通用的坐标系，无论用户的浏览器设置在什么尺寸，您都将始终如一地适用？

将网页内容包装在一个 div 中，并以此为基础您的点击事件。另外请记住，如果用户将窗口大小调整为比您的网页更小，您将有一个滚动条，并且您必须考虑滚动偏移量。

【参考方案1】：

jQuery x y document coordinates of DOM object 描述了一个类似的问题并有一个可能的解决方案。希望能正确处理浏览器行为。

如果这不起作用，这个问题可能很难解决。请参阅http://weblogs.asp.net/bleroy/archive/2008/01/29/getting-absolute-coordinates-from-a-dom-element.aspx，了解微软几年前在实施此功能时遇到了多大的困难。