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

jQuery でのターゲット要素のクリック座標の特定

クリック時の指定された HTML 要素上のマウス ポインターの位置を決定するには、次のようにします。 jQueryイベントハンドラーを利用します。ただし、誤った結果が返されるという最近の問題が発生しました。

誤った位置決め結果の修正

提供された最初のコードは、クリック座標を相対的に計算しようとしました。 target 要素には、event.pageX プロパティとevent.target.offsetLeft プロパティを使用します。ただし、この方法では正確な結果が得られないことが判明しています。

イベント座標を理解する

次の 2 種類のマウス ポインター座標を区別することが重要です。

• ドキュメントに相対:event.pageX を使用して取得
• 要素に対する相対位置: ドキュメント内の要素の位置を決定するには、offset() メソッドを使用する必要があります。ポインターの座標からオフセット値を減算します。

Position() vs Offset()

このコンテキストでは、position() メソッドは、親コンテナーを基準とした要素の位置を計算するため、このシナリオには関係ありませんが、適切ではありません。一方、offset() メソッドは、ドキュメントに対する要素の相対的な位置を提供し、クリック座標を正確に計算できるようにします。

改良されたコード

この問題を解決するには、ターゲット要素に対するクリック座標を正しく決定するようにコードが修正されました:

jQuery("#seek-bar").click(function(e){
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    alert(x + ", " + y); 
});

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