jQueryでターゲット要素を基準とした正確なクリック座標を取得するにはどうすればよいですか?

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

特定のターゲット要素上のマウス クリックの正確な位置を取得するには、次のようにします。 pageX プロパティと pageY プロパティを使用してドキュメント全体に対する相対位置を決定するか、offset() メソッドを使用して特定のドキュメント内での相対位置を確立することを検討できます。 element.

ただし、要素の親または別の包含要素内の相対位置が必要な場合は、position() メソッドを使用できます。これらのメソッドの使用法を示す例を次に示します。

$('#element').on('click', function(e) {
  // Determining position relative to document using pageX and pageY:
  var clickX = e.pageX;
  var clickY = e.pageY;

  // Determining position relative to element using offset():
  var offsetX = $(this).offset().left;
  var offsetY = $(this).offset().top;
  var relativeClickX = e.pageX - offsetX;
  var relativeClickY = e.pageY - offsetY;

  // Determining position relative to parent using position():
  var positionX = $(this).position().left;
  var positionY = $(this).position().top;
  var parentRelativeClickX = e.pageX - positionX;
  var parentRelativeClickY = e.pageY - positionY;
});

コードの場合:

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

あなたの目的は、# に対する相対的なマウス カーソルの位置を取得することです。クリックするとシークバー要素が表示されます。ただし、offsetLeft プロパティは親を基準とした要素の位置を返すため、e.target.offsetLeft の減算は正しくありません。代わりに、ドキュメントに対する相対的な X 座標を提供する e.pageX を直接利用する必要があります。

詳細については、提供されているコードのデモを参照してください。

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