Menggunakan jQuery cara mendapatkan koordinat klik pada elemen target

109

Saya memiliki event handler berikut untuk elemen html saya

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

Saya perlu menemukan posisi mouse di # seek-bar saat mengklik. Saya akan berpikir kode di atas harus berfungsi, tetapi memberikan hasil yang salah

— Roma
sumber

4

Posisi relatif terhadap elemen, viewport, atau seluruh dokumen?

— James

Saya membuatnya bekerja menggunakan e.layerX - e.target.offsetLeft dan untuk Oprea hanya menggunakan e.offsetX

— Roman

jika Anda ingin mendapatkannya di situs yang responsif. coba artikel ini, Anda bisa mendapatkannya di situs responsif juga. kvcodes.com/2014/03/…

— Kvvaradha

235

Apakah Anda mencoba untuk mendapatkan posisi penunjuk mouse relativeke elemen (atau) hanya lokasi penunjuk mouse

Coba Demo ini: http://jsfiddle.net/AMsK9/

Edit:

1) event.pageX, event.pageYmemberi Anda dokumen relatif posisi mouse!

Ref : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset(): Ini memberikan posisi offset suatu elemen

Ref : http://api.jquery.com/offset/

3) position(): Ini memberi Anda Posisi relatif dari suatu elemen yaitu,

menganggap sebuah elemen tertanam di dalam elemen lain

contoh :

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

Ref : 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 untuk contoh ... satu catatan meskipun saya juga akan menambahkan kode di sini, jika tautan Anda mati pertanyaan ini menjadi tidak berguna di masa depan, saya akan meletakkan kode untuk masing-masing dan deskripsi singkat di sini :)

— Nick Craver

2

Ada cara yang lebih sederhana untuk melakukan kasus '#B': e.offsetXdan e.offsetY. Saya rasa Anda ingin mengeditnya. Saya sudah memperbarui biola di sini . Saya menemukan solusi ini berkat kirimannya, jadi terima kasih.

— toto_tico

Terima kasih, karena saya pribadi bingung dengan offset () dan position (), bagi siapa saja yang membutuhkan klarifikasi lebih lanjut dapat membaca stackoverflow.com/questions/3202008/… demi kenyamanan

— simongcc

Saya memiliki elemen yang dipasang di bagian bawah - yaitu 100% lebarnya, jadi saya menggunakan lebar jendela sebagai posX - Jadi saya dapat menentukan apakah pengguna mengklik "X" yang dibuat dengan: setelah aturan css yang berada di pojok kanan atas.

— amurrell

Contoh yang bagus, tetapi tidak jelas apa perbedaan antara .position () dan .offset (). Anda harus membungkus elemen #C di beberapa div induk dengan beberapa posisi contoh untuk melihat bahwa klik pada #C mengembalikan posisi mouse Anda di dalam elemen yang merupakan induk dari #C, yang mungkin paling tidak sering berguna.

— amik

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

— Nisar
sumber

3

Coba ini:

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

Di sini Anda dapat menemukan info lebih lanjut dengan DEMO

— Krunal
sumber

1

Dalam persentase:

$('.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
sumber

1

Jika MouseEvent.offsetX yang didukung oleh browser Anda (semua browser utama benar-benar mendukung itu), The jQuery objek acara akan berisi properti ini.

Properti hanya baca MouseEvent.offsetX menyediakan offset dalam koordinat X dari penunjuk mouse antara kejadian itu dan tepi padding dari node target.

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

— Memet Olsen
sumber

0

lihat di sini masukkan deskripsi tautan di sini

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
sumber