Question

我试图在相对容器中获取鼠标单击事件的x和y坐标。 stackoverflow上有关于此主题的几个问题，例如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）上无效。我们滚动内容时。它在仿真模式下的桌面Chrome中也不起作用。 pageY的值很奇怪，我不明白为什么。有人可以帮助我吗？也许我们不能使用这种方法？或者有一个快速解决方案吗？

以下是Plunk：http://plnkr.co/edit/Ul2bd8v1iLRvEyGxjv4b?p=info 只需滚动到红色矩形并单击它。它会输出鼠标相对于该矩形左上角的坐标。如果您在Chrome中打开仿真（例如Nexus 5）或在Chrome中打开Android设备上的Plunk（尝试使用v.4.4.2和4.2.2，仅限Chrome），您将获得错误的位置。

提前致谢！

Answer 1

我不是为移动设备创建布局的专家，所以请保持温和，检查我的解决方案是否符合您的需求。我认为移动设备的主要问题是你应该使用触摸事件而不是点击事件。因此，您可以使用 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 我已经在普通的Chrome和模拟器中检查了它，它似乎工作正常。

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

<强>更新：

经过一番研究后，我找到了这个帖子：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

如何在相对容器内部单击鼠标（触摸）位置

1 个答案: