jQuery の要素に関連するクリック座標を正確に取得する方法は?

jQuery を使用してターゲット要素のクリック座標を取得する

jQuery を使用して HTML 要素のクリック イベントを処理する場合、相対的なマウスの位置を検索しようとすると、誤った結果が発生する可能性があります。要素。これは、使用可能な jQuery メソッドの誤解が原因である可能性があります。

event.pageX およびevent.pageY

これらのプロパティは、ドキュメントに対する相対的なマウスの位置を提供します。これらはターゲット要素に固有のものではありません。

offset()

このメソッドは、親を基準とした要素のオフセット位置を与えます。これは通常、ページ上の要素の位置を決定するために使用されますが、要素自体に対する相対的なマウスの位置は与えられません。

position()

offset() とは異なり、このメソッドは直接の親に対する要素の相対位置。これは、内部コンテナ内の要素の位置を取得するのに役立ちます。

例

これらのメソッドの違いを示すために、次の HTML を検討してください。

<div>

次の JavaScript イベント ハンドラー:

jQuery("#seek-bar").click(function(e) {
  // Incorrectly uses offset()
  var x = e.pageX - jQuery(this).offset().left;
  console.log(x);

  // Correctly uses position()
  var x = e.pageX - jQuery(this).position().left;
  console.log(x);
});

#seek バーをクリックすると、最初のコンソール ログが表示されることがわかります。ページ上の要素の絶対位置を与える offset() を使用するため、不正確な結果が生成されます。ただし、2 番目のコンソール ログでは、position() を使用して、要素に対する正しいマウスの位置が提供されます。

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