Question

我有一个页面可以按event.pageX和event.pageY收集点击事件，我希望按比例将这些位置映射到另一页上的600px x 750px框。这意味着如果框中的其他页面有屏幕截图，则点击位置的标记将在同一位置以可视方式显示。

我知道我可以使用($('body').width(), $('body').height())，(document.body.offSetWidth, document.body.offSetHeight)和(screen.width, screen.height)，但我不太确定如何最好地将这些结合起来以获得准确的比率。

目前我只是在使用（在sudo代码中）：

x_ratio = 600 / document.body.offSetWidth
y_ratio = 750 / document.body.offSetHeight

new_x_position = event.pageX * x_ratio
new_y_position = event.pageY * y_ratio

然后在框内标记点击事件

<div id='click_marker' 
    style="position: relative; top: new_y_position px; left: new_x_position px;">
</div>

但这似乎并不能保持浏览器和屏幕尺寸的准确性。我想在一个浏览器和屏幕尺寸中点击一下，并能够在任何浏览器和屏幕尺寸上准确地映射它。

我如何能够始终如一地准确地进行此计算？

Answer 1

pageX和pageY，为您提供相对于网页而非屏幕的坐标
使用screenX和screenY获取相对于屏幕或clientX和clientY的坐标，以获取它们相对于浏览器客户端窗口。这些事件字段可能并非在所有浏览器中都可用。

Answer 2

首先，您需要建立您想要翻译坐标的区域。它是浏览器窗口还是文档正文？即如果您有一个滚动条，您是否希望有人向下滚动并且单击页面底部也会显示在600x750框的底部或外面？你的问题显然不清楚。

event.pageX和event.pageY提供来自文档左边和上边缘的位置因此，当body填充整个文档时，使用body.offsetWidth只会保持一致。请检查以下小提琴，以了解：http://jsfiddle.net/Exceeder/YPHkr/ - 注意越过右侧边框将如何使相对坐标超过1.0

最简单的方法是获取$（window）.width（）和$（window）.height（） - 如果不需要考虑滚动位置。否则你需要计算滚动位置，算法会有点困难。

确定后，您需要获得正确的宽度和高度。相关问题：document.body.offsetWidth variations for different browsers

映射浏览器和屏幕大小的点击位置

2 个答案: