ホームページ >ウェブフロントエンド >CSSチュートリアル >jQueryを使用してターゲット要素を基準とした正確なマウスクリック座標を取得する方法?
jQueryを使用してターゲット要素を基準とした正確なマウスクリック座標を取得する方法?
- Mary-Kate Olsenオリジナル
- 2024-12-05 22:51:14672ブラウズ
jQuery を使用したターゲット要素のマウス クリック座標を理解する
jQuery を使用して HTML 要素のクリック イベントを処理する場合、マウスの座標を正確に取得する方法を知ることが重要です。ターゲット要素に対する相対ポインタ。詳細な例を使用して、このトピックを調べて明確にしましょう。
問題の診断
次のイベント ハンドラーを考えてみましょう:
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
目標は、マウス ポインタの相対的な位置を取得することです。クリック時の #seek-bar 要素。ただし、提供されたコードは間違った結果を返す可能性があります。
位置プロパティについて
1. event.pageX、event.pageY:
これらのプロパティは、ドキュメント全体に対するマウス ポインターの相対座標を提供します。
参照: http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2. offset():
この関数は、要素を含むドキュメント内の要素のオフセット位置 (ページの左上隅からの距離) を返します。
参照: http://api.jquery.com/offset/
3. Position():
この関数は、それを含むドキュメント内での要素の位置 (親要素を基準とした相対位置) を返します。
Ref: http://api .jquery.com/position/
最初の問題を解決するには、これらの位置プロパティとその使用目的を考慮することが重要です。この場合、#seek-bar を基準としたマウス ポインターの位置を取得するには、offsetLeft の代わりに offset() 関数を使用する必要があります。
修正されたコード:
jQuery("#seek-bar").click(function(e){
var x = e.pageX - $(this).offset().left;
alert(x);
});
例デモ
これらの位置プロパティの違いを説明するために、HTML スニペットの例と対応する JavaScript コードを次に示します。
HTML
<body> <div>
JavaScript
$(document).ready(function (e) {
$('#A').click(function (e) { //Default mouse Position
alert(e.pageX + ' , ' + e.pageY);
});
$('#B').click(function (e) { //Offset mouse Position
var posX = $(this).offset().left,
posY = $(this).offset().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
$('#C').click(function (e) { //Relative ( to its parent) mouse position
var posX = $(this).position().left,
posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
});
これらをクリックするとdivs を使用すると、使用される位置プロパティに基づいて個別の結果を観察できます。
以上がjQueryを使用してターゲット要素を基準とした正確なマウスクリック座標を取得する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。