Bagaimana Mendapatkan Koordinat Klik Tepat Berbanding Elemen Sasaran dalam jQuery?

Mencari Koordinat Klik pada Elemen Sasaran Menggunakan jQuery

Untuk mendapatkan kedudukan tepat klik tetikus pada elemen sasaran tertentu, anda boleh mempertimbangkan untuk menggunakan sama ada sifat pageX dan pageY untuk menentukan kedudukan relatif kepada keseluruhan dokumen, atau kaedah offset() untuk menetapkan kedudukan relatif dalam spesifik elemen.

Walau bagaimanapun, jika anda memerlukan kedudukan relatif dalam induk elemen atau elemen lain yang mengandungi, anda boleh menggunakan kaedah position(). Berikut ialah contoh yang menunjukkan penggunaan kaedah ini:

$('#element').on('click', function(e) {
  // Determining position relative to document using pageX and pageY:
  var clickX = e.pageX;
  var clickY = e.pageY;

  // Determining position relative to element using offset():
  var offsetX = $(this).offset().left;
  var offsetY = $(this).offset().top;
  var relativeClickX = e.pageX - offsetX;
  var relativeClickY = e.pageY - offsetY;

  // Determining position relative to parent using position():
  var positionX = $(this).position().left;
  var positionY = $(this).position().top;
  var parentRelativeClickX = e.pageX - positionX;
  var parentRelativeClickY = e.pageY - positionY;
});

Dalam kes kod anda:

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

Niat anda adalah untuk mendapatkan semula kedudukan kursor tetikus berbanding # elemen search-bar apabila mengklik. Walau bagaimanapun, penolakan e.target.offsetLeft adalah tidak betul kerana sifat offsetLeft mengembalikan kedudukan elemen berbanding induknya. Sebaliknya, anda harus menggunakan e.pageX secara langsung, yang memberikan koordinat x berbanding dokumen.

Rujuk demonstrasi kod yang disediakan untuk perincian yang lebih terperinci.

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