BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] jQueryを使って、ターゲット要素のクリック座標を取得する方法

2022-05-16 11:15:05

質問

html要素に以下のようなイベントハンドラがあります。 

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

クリックしたときの#seek-bar上のマウスの位置を求める必要があります。私は上記のコードが動作するはずだと思ったが、それは不正確な結果を与える

どのように解決するのですか？

マウスポインタの位置を取得しようとしているのですか？ relative を要素に変換しようとしているのか（あるいは単にマウスポインタの位置である



このデモを試してみてください。 http://jsfiddle.net/AMsK9/

編集:

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() : これは、ある要素の相対的な位置を示す。

ある要素が他の要素の内部に埋め込まれていると考える

例 : 

<div id="imParent">
   <div id="imchild" />
</div>

参照 : http://api.jquery.com/position/

HTML 

<body>
   <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
   <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
   <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

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));
    });
});

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します