通过鼠标单击捕获XY坐标（javascript）

Question

我知道这应该是一个问题，得到一个答案（我想我正在这样做，只是不确定我的清晰度）。 我被要求找到一种方法来从鼠标单击中捕获xy坐标，然后将其存储在数据库中。 我想知道的是，如果一个人使用台式机，平板电脑，智能手机在同一位置单击，那么生成的xy是否会相同？ 我想我问的原因是他们不一样是我的直觉。 如果是这种情况，那么在以后将所有鼠标单击从数据库中拉出时，如何准确映射所有鼠标单击的位置。 我希望我在这里有意义（我自己不太确定）。

谢谢大家！

Answer 1

当您获得点击事件的X / Y线（鼠标按下或触地得分，无论发生什么）时，它们以像素为单位，位于屏幕的左侧和顶部。

由于手机，平板电脑，笔记本电脑和台式机的分辨率不同，因此它们的坐标也不同。 您可以做的就是将其转换为％...假设您有一张图片，并且希望用户能够标记某人...那么您可以将坐标保存为％，如下所示：

x: 35%, y: 60%

1920x1080 => x: 672px (1920/100*35), y = 648px (1080/100*60)
600x400 => x: 210px (600/100*35), y = 240px (400/100*60)
...

那就是我会尝试的。

编辑
正如@Binoy指出的，相同的X / Y坐标在任何设备上都相同。 但是在移动设备上，您可能需要滚动，因为该点在视口之外。 在我的回答中，我猜测是存在某种响应式布局（例如CSS max-width: 100%的图像），并且用户正在单击它。

Answer 2

我不认为每个设备针对Web页面的特定点都具有相同的xy坐标。 在这种情况下，即使没有响应式UI设计本身，每个Web也应在所有设备中均等显示。 因此，我认为从一个设备中将xy坐标保存在db中并不是理想的情况，但是您可以采取另一种方式，例如将xy坐标与屏幕分辨率一起保存。 因此，相同分辨率的设备将具有相同的xy坐标