通过鼠标点击获取X和Y坐标(javascript）

Capturing X Y Coordinates from Mouse Click (javascript)

本文关键字：坐标 javascript 鼠标获取更新时间：2023-09-26

我知道这应该是问一个问题，得到一个答案（我想我正在这样做，只是不确定我的清晰度）。我被要求找到一种方法，从鼠标点击中捕捉xy坐标，然后将其存储在数据库中。我想知道的是，如果一个人用台式机、平板电脑、智能手机点击同一个地方，结果会是一样的吗？我想我问的原因是我的预感他们不会一样。如果是这样的话，那么在以后从数据库中提取鼠标点击时，我如何准确地映射所有鼠标点击的位置。我希望我在这里讲得有道理（我自己也不太确定）。

谢谢大家！

当您获得点击（鼠标放下或触地）事件的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%的图像），用户正在点击它。

我不认为每个设备对于网页的特定点都有相同的xy坐标。如果是这样的话，即使没有响应式UI设计本身，每个Web也应该在所有设备中平等显示。因此，我认为从一台设备将xy坐标保存在数据库中不是理想的情况，但你可以做另一种方法，比如保存xy坐标和屏幕分辨率。因此，相同分辨率的设备将具有相同的xy坐标