从鼠标中捕捉X Y坐标点击（javascript）

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

谢谢大家！

来源

2015-03-31 slopes

听起来像你不仅想要记录鼠标的x，y，而且还需要浏览器的用户代理;） – RenaissanceProgrammer 2015-03-31 21:45:07

我不认为每个设备将有相同的xy协调网页的特定点。如果是这样的话，即使没有响应式的UI设计本身，每个Web应该在所有设备上均匀显示。因此，从一台设备中保存xy坐标不会是理想的情况，但您可以采取另一种方式，比如保存xy坐标和屏幕分辨率。因此，相同的分辨率设备将具有相同的xy坐标

来源

2015-03-31 21:54:08 Binu

实际上这是真的。在我的回答中，我只是猜测，有某种响应式设计或如此使用。如果这对你很好，我会加上你的观点。 – wawa 2015-03-31 22:02:27

感谢所有迄今为止的评论。听起来这将是更复杂的问题来解决。以智能手机为例，我假设x，y会随总页面大小而最大化，并且您向上或向下滚动不会影响x，y是什么？再次感谢 – slopes 2015-04-01 14:46:17

感谢大家对我的准问题的帮助:)。我必须对这个问题做更多的考虑，以确定它是否值得继续研究。 – slopes 2015-04-01 20:13:55

当您获得点击（mousedown或touchdown，什么是）事件的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%的图像），并且用户正在点击该布局。

来源

2015-03-31 21:50:29 wawa

从鼠标中捕捉X Y坐标点击（javascript）

回答

相关问题