javascript - jQuery pageX/pageY 在不同设备上返回不同值

Question

因此，我使用从各种来源收集的以下代码来尝试计算出点击时图像的坐标:

var naturalWidth = 690;
var x = 0;
var y = 0;

var img = $('.imageToWin');
ratio = naturalWidth / img.width();
x = parseInt((event.pageX - img.offset().left) * ratio);
y = parseInt((event.pageY - img.offset().top) * ratio);

然而，当在不同设备(例如笔记本电脑、平板电脑、手机等)上单击同一点时，实际坐标会发生变化。我确实在某处读到过有关将其更改为使用百分比的内容，但是当我尝试除以图像高度/宽度时，它不起作用。

谢谢。

Answer 1

所以最后我自己解决了这个问题!我决定使用 iframe 将图像引入页面并处理新页面上的定位，以通过 jQuery 计算出坐标的位置。这可以在平板电脑、手机、笔记本电脑和台式机上正常工作。