jQueryでターゲット要素を基準としたマウスクリック座標を取得する方法?

jQuery を使用したターゲット要素のクリック座標の決定

クリック時にターゲット要素を基準としたマウス座標をキャプチャするために、jQuery は正確な結果を取得するためのいくつかのメソッドを提供します。

event.pageX およびevent.pageY

event.pageX およびevent.pageY プロパティは、ドキュメントに対する相対的なマウス ポインターの位置を提供します。

Element.offset()

offset() メソッドは、ドキュメント内の要素のオフセット位置を取得します。

Element.position()

position() メソッドは、親内の要素の相対位置を決定します。コンテナ。

デモ

次の JavaScript コードを考えてみましょう:

jQuery("#seek-bar").click(function(e) {
    var posX = e.pageX - $(this).offset().left;
    var posY = e.pageY - $(this).offset().top;
    alert("X-coordinate: " + posX + "\nY-coordinate: " + posY);
});

このコードは、ターゲット要素を基準とした正確なクリック座標を計算して表示します。

HTML の例

<div>

以上がjQueryでターゲット要素を基準としたマウスクリック座標を取得する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。