Bagaimana untuk Mendapatkan Koordinat Klik Tetikus yang Tepat Berbanding dengan Elemen Sasaran Menggunakan jQuery?-tutorial css-php.cn

Bagaimana untuk Mendapatkan Koordinat Klik Tetikus yang Tepat Berbanding dengan Elemen Sasaran Menggunakan jQuery?

Mary-Kate Olsen

Lepaskan： 2024-12-05 22:51:14

asal

676 orang telah melayarinya

How to Get Accurate Mouse Click Coordinates Relative to a Target Element Using jQuery?

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

Salin selepas log masuk

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

Salin selepas log masuk

Contoh Demonstrasi

Untuk menggambarkan perbezaan antara sifat kedudukan ini, berikut ialah contoh coretan HTML dan kod JavaScript yang sepadan:

HTML

<body>
   <div>

Salin selepas log masuk

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

Salin selepas log masuk

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!