如何讓鼠標點擊（觸摸）在相對容器內的位置

我想要在相對容器內獲得鼠標點擊事件的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

如何讓鼠標點擊（觸摸）在相對容器內的位置

回答

相關問題