jQueryを使用してターゲット要素を基準とした正確なマウスクリック座標を取得する方法?-CSSチュートリアル-php.cn

jQuery を使用したターゲット要素のマウスクリック座標を理解する

問題の診断

位置プロパティについて

例デモ

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Mary-Kate Olsen

Dec 05, 2024 pm 10:51 PM

How to Get Accurate Mouse Click Coordinates Relative to a Target Element Using jQuery?

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。