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

109

私のhtml要素に次のイベントハンドラーがあります。

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

クリック時に＃seek-bar上のマウスの位置を見つける必要があります。上記のコードはうまくいくと思いましたが、間違った結果が出ます

— ローマ人
ソース

4

要素、ビューポート、またはドキュメント全体に対して相対的に配置しますか？

— ジェームズ

私はそれをe.layerX-e.target.offsetLeftを使用して動作させ、Opreaのためにe.offsetXを使用しました

— Roman

レスポンシブサイトで取得したい場合。この記事を試してみると、レスポンシブサイトでも入手できます。kvcodes.com/2014/03/...

— Kvvaradha

235

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

9

例の+1 ...ここにもコードを追加しますが、リンクが

— 切れて

2

'#B'：e.offsetXとe.offsetY。の場合を実行する簡単な方法があります。編集したいと思います。私はすでにここでフィドルを更新しました。私はこの解決策を投稿のおかげで見つけたので、ありがとう。

— toto_tico 2013年

ありがとう、私は個人的にoffset（）とposition（）と混同しているので、さらに説明が必要な人は、stackoverflow.com

— questions / 3202008 /…を

私は下部に固定された要素を持っています-それは100％幅だったので、代わりにウィンドウ幅をposXとして使用しました-それで、ユーザーが：after cssルールで作成された「X」をクリックしたかどうかを判断できました右上にありました。

— amurrell 2014年

良い例ですが、.position（）と.offset（）の違いは明らかではありません。#Cをクリックすると#Cの親である要素内のマウスの位置が返されることを確認するには、いくつかの親divの要素#Cをいくつかの例示的な位置でラップする必要があります。

— amik 2014年

15

$('#something').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;

    console.log(xPos, yPos);
});

— ニサル
ソース

3

これを試して：

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

ここでは、デモでより多くの情報を見つけることができます

— クルナル
ソース

1

割合で：

$('.your-class').click(function (e){
    var $this = $(this); // or use $(e.target) in some cases;
    var offset = $this.offset();
    var width = $this.width();
    var height = $this.height();
    var posX = offset.left;
    var posY = offset.top;
    var x = e.pageX-posX;
        x = parseInt(x/width*100,10);
        x = x<0?0:x;
        x = x>100?100:x;
    var y = e.pageY-posY;
        y = parseInt(y/height*100,10);
        y = y<0?0:y;
        y = y>100?100:y;
    console.log(x+'% '+y+'%');
});

— l2aelba
ソース

1

お使いのブラウザーでMouseEvent.offsetXがサポートされている場合（すべての主要なブラウザーが実際にサポートしています）、jQuery Eventオブジェクトにはこのプロパティが含まれます。

MouseEvent.offsetX読み取り専用プロパティは、そのイベントとターゲットノードのパディングエッジの間のマウスポインターのX座標のオフセットを提供します。

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});

— メメットオルセン
ソース

0

ここにリンクの説明をここに入力してください

html

<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>

CSS

#myPosition{
  background-color:red;
  height:200px;
  width:200px;
}

jquery

$(document).ready(function(){
    $("#myPosition").click(function(e){
       var elm = $(this);
       var xPos = e.pageX - elm.offset().left;
       var yPos = e.pageY - elm.offset().top;
       alert("X position: " + xPos + ", Y position: " + yPos);
    });
});

— AirBlack
ソース