Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mendapatkan Koordinat Klik Tetikus yang Tepat Berbanding dengan Elemen Sasaran Menggunakan jQuery?
Bagaimana untuk Mendapatkan Koordinat Klik Tetikus yang Tepat Berbanding dengan Elemen Sasaran Menggunakan jQuery?
- Mary-Kate Olsenasal
- 2024-12-05 22:51:14637semak imbas
Memahami Koordinat Klik Tetikus pada Elemen Sasaran Menggunakan jQuery
Apabila mengendalikan acara klik pada elemen HTML dengan jQuery, adalah penting untuk mengetahui cara mendapatkan semula koordinat tetikus dengan tepat penunjuk relatif kepada elemen sasaran. Mari kita teroka dan jelaskan topik ini dengan contoh terperinci.
Diagnosis Isu
Pertimbangkan pengendali acara berikut:
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
Matlamatnya adalah untuk mendapatkan kedudukan penuding tetikus berbanding dengan elemen #seek-bar pada saat klik. Walau bagaimanapun, kod yang diberikan mungkin memberikan hasil yang salah.
Memahami Sifat Kedudukan
1. event.pageX, event.pageY:
Sifat ini menyediakan koordinat penuding tetikus berbanding keseluruhan dokumen.
Ruj: http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2. offset():
Fungsi ini mengembalikan kedudukan offset (jarak dari sudut kiri atas halaman) elemen dalam dokumen yang mengandunginya.
Ruj: http://api.jquery.com/offset/
3. position():
Fungsi ini mengembalikan kedudukan elemen (berbanding dengan elemen induknya) dalam dokumen yang mengandunginya.
Ruj: http://api .jquery.com/position/
Untuk menyelesaikan isu awal, adalah penting untuk mempertimbangkan sifat kedudukan ini dan penggunaan yang dimaksudkan. Dalam kes ini, untuk mendapatkan kedudukan penuding tetikus berbanding bar #seek, kita harus menggunakan fungsi offset() bukannya offsetLeft.
Kod Dibetulkan:
jQuery("#seek-bar").click(function(e){
var x = e.pageX - $(this).offset().left;
alert(x);
});
Contoh Demonstrasi
Untuk menggambarkan perbezaan antara sifat kedudukan ini, berikut ialah contoh coretan HTML dan kod JavaScript yang sepadan:
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));
});
});
Dengan mengklik pada ini divs, anda boleh melihat hasil yang berbeza berdasarkan sifat kedudukan yang digunakan.
Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Koordinat Klik Tetikus yang Tepat Berbanding dengan Elemen Sasaran Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!