Bagaimana Cara Mendapatkan Koordinat Klik Relatif dengan Elemen Sasaran dengan betul dalam jQuery?

Mengenal pasti Koordinat Klik pada Elemen Sasaran dalam jQuery

Untuk menentukan kedudukan penuding tetikus pada elemen HTML yang ditentukan selepas mengklik, kita boleh memanfaatkan pengendali acara jQuery. Walau bagaimanapun, isu baru-baru ini telah dihadapi di mana keputusan yang salah dikembalikan.

Membetulkan Keputusan Kedudukan Yang Salah

Kod awal yang disediakan cuba mengira koordinat klik berbanding dengan elemen sasaran menggunakan sifat event.pageX dan event.target.offsetLeft. Walau bagaimanapun, didapati kaedah ini tidak memberikan hasil yang tepat.

Memahami Koordinat Acara

Adalah penting untuk membezakan antara dua jenis koordinat penunjuk tetikus:

• Berkaitan dengan dokumen: Diperolehi menggunakan event.pageX dan event.pageY, yang memberikan kedudukan penuding berbanding keseluruhan dokumen.
• Relatif kepada elemen: Memerlukan menggunakan kaedah offset() untuk menentukan kedudukan elemen dalam dokumen, diikuti dengan menolak nilai offset daripada koordinat penunjuk.

Position() vs Offset()

Dalam konteks ini, kaedah position() tidak sesuai kerana ia mengira kedudukan elemen berbanding bekas induknya, yang tidak berkaitan dalam senario ini. Kaedah offset() pula menyediakan kedudukan elemen berbanding dokumen, membolehkan kami mengira koordinat klik dengan tepat.

Kod yang Diperbaiki

Kepada menyelesaikan isu, kod telah disemak untuk menentukan koordinat klik dengan betul berbanding dengan elemen sasaran:

jQuery("#seek-bar").click(function(e){
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    alert(x + ", " + y); 
});

Atas ialah kandungan terperinci Bagaimana Cara Mendapatkan Koordinat Klik Relatif dengan Elemen Sasaran dengan betul dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!