如何让鼠标点击（触摸）在相对容器内的位置

我想要在相对容器内获得鼠标点击事件的x和y坐标。关于这个话题已经有几个关于计算器的问题，例如jQuery get mouse position within an element 所以我试着将事件中的event.pageX和event.pageY坐标转换成相对于父项的鼠标位置，如下例所示：如何让鼠标点击（触摸）在相对容器内的位置

$("#something").click(function(e){ 
    var parentOffset = $(this).parent().offset(); 
    //or $(this).offset(); if you really just want the current element's offset 
    var relX = e.pageX - parentOffset.left; 
    var relY = e.pageY - parentOffset.top; 
});

在大多数情况下，它工作得很好。但是，当我们滚动内容时，它不适用于Chrome中的Android（Nexus 5）。它在仿真模式下的Desktop Chrome中也不起作用。 pageY的价值很奇怪，我不明白为什么。有人可以帮助我吗？也许我们不能使用这种方法？或者有一个快速解决这个问题？

这是普拉克：http://plnkr.co/edit/Ul2bd8v1iLRvEyGxjv4b?p=info 只需滚动到红色的矩形，然后单击它。它会输出鼠标相对于该矩形左上角的坐标。如果您在Chrome（例如Nexus 5）中启用仿真功能或在Chrome中打开Android设备上的Plunk（尝试第4.4.2和4.2.2版，仅限Chrome），您将获得不正确的位置。

提前致谢！

来源

2014-10-20 Andrey

也许你应该尝试[JQuery的触摸事件]（http://stackoverflow.com/a/15595893/3419997） – turtle 2014-10-20 08:01:23

@sumit pageY仍然很奇怪 – Andrey 2014-10-20 10:18:43

我并不擅长为移动设备创建布局，所以请温和地检查我的解决方案是否符合您的需求。我认为移动设备的主要问题是您应该使用触摸事件而不是点击事件。所以你可以用touchstart而不是点击事件。我已经改变了你的例子一点点：

我增加了一个认购touchstart事件：

$('.container').on('touchstart', handler);

我已经改变了你的处理程序来处理触摸事件，以及：

var touch = e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0]; 
e = touch || e;

完全比如你可以在这里找到：http://plnkr.co/edit/whze0Idf24NMvo1RCe7T?p=info 我在平常的铬和仿真器来检验它，以及，它似乎工作正常。

所以，在移动设备上使用触摸事件的基本思路。可能您需要改进订阅操作才能订阅一个事件，但这取决于您。

更新：

经过一番研究，我发现这个线程：Did Android chrome pageY value change with the latest chrome update?

问题是与Chrome浏览器的特定版本（38.0.2125.102），错误在这里报道：https://code.google.com/p/chromium/issues/detail?id=423802

来源

2014-10-20 18:33:47 ntl

如何让鼠标点击（触摸）在相对容器内的位置

回答

相关问题