[解決済み] jQueryで画像上のマウスクリックのX/Y座標を取得する [重複] [重複

質問

jQueryを使って、画像のクリックイベントのX/Y座標を取得したいと思います。座標は、ページ全体に対する相対的なものではなく、画像に対する相対的なものである必要があります。

どのように解決するのですか？

あなたは pageX と pageY を使って、ウィンドウ内のマウスの位置を取得することができます。また、jQueryの offset を使って要素の位置を取得することもできます。

ということで、本来は pageX - offset.left は画像の左からどの程度か、そして pageY - offset.top は画像の上からの距離を表します。

以下はその例です。

$(document).ready(function() {
  $('img').click(function(e) {
    var offset = $(this).offset();
    alert(e.pageX - offset.left);
    alert(e.pageY - offset.top);
  });
});

を作ったので の例を示します。 と はこちら がソースです。

下や右からどのくらい離れているかを計算するには、jQueryの width と height メソッドを使用します。