Bagaimana untuk Mendapatkan Koordinat Klik dengan Tepat Berkaitan dengan Elemen dalam jQuery?

Mendapatkan Koordinat Klik pada Elemen Sasaran dengan jQuery

Apabila mengendalikan acara klik pada elemen HTML menggunakan jQuery, seseorang mungkin menghadapi keputusan yang salah apabila cuba mencari kedudukan tetikus berbanding dengan unsur tersebut. Ini mungkin disebabkan oleh salah faham kaedah jQuery yang tersedia.

event.pageX dan event.pageY

Sifat ini memberikan kedudukan tetikus berbanding dokumen. Ia tidak khusus untuk elemen sasaran.

offset()

Kaedah ini memberikan kedudukan offset elemen berbanding induknya. Ia biasanya digunakan untuk menentukan kedudukan elemen pada halaman, tetapi ia tidak memberikan kedudukan tetikus berbanding dengan elemen itu sendiri.

position()

Tidak seperti offset(), kaedah ini memberikan kedudukan relatif sesuatu unsur berkenaan dengan induk terdekatnya. Ia berguna untuk mendapatkan kedudukan elemen di dalam bekas dalam.

Contoh

Untuk menunjukkan perbezaan antara kaedah ini, pertimbangkan HTML berikut:

<div>

Dan pengendali acara JavaScript berikut:

jQuery("#seek-bar").click(function(e) {
  // Incorrectly uses offset()
  var x = e.pageX - jQuery(this).offset().left;
  console.log(x);

  // Correctly uses position()
  var x = e.pageX - jQuery(this).position().left;
  console.log(x);
});

Apabila mengklik pada bar #seek, anda akan melihat bahawa log konsol pertama menghasilkan keputusan yang salah kerana ia menggunakan offset(), yang memberikan kedudukan mutlak bagi elemen pada halaman. Log konsol kedua, bagaimanapun, menyediakan kedudukan tetikus yang betul berbanding dengan elemen dengan menggunakan position().

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