jQuery mendapat kedudukan tetikus relatif

Dapatkan kedudukan relatif tetikus relatif terhadap elemen dalam jQuery

Coretan kod jQuery berikut digunakan untuk mendapatkan kedudukan relatif penunjuk tetikus. Fungsi ini mengambil ID elemen dan koordinat X dan Y semasa penunjuk tetikus sebagai parameter. Ia kemudian mengembalikan jarak relatif antara kedudukan semasa kursor tetikus dan elemen yang ditentukan.

function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;
  return {'x': x, 'y': y};
}

Contoh Penggunaan

jQuery(document).ready(function($) {

    // 获取鼠标指针当前的x和y坐标
    var X = $('body').offset().left;
    var Y = $('body').offset().top;
    mouseX = ev.pageX - X;
    mouseY = ev.pageY - Y;

    // 获取页面上相对于#eid元素的相对位置
    alert(rPosition('eid',mouseX,mouseY)); //注意此处将x,y更正为mouseX,mouseY

});

Soalan Lazim Mengenai JQuery Relatif kepada Kedudukan Mouse (Soalan Lazim)

Bagaimana menggunakan jQuery untuk mendapatkan kedudukan tetikus tanpa menggunakan acara tetikus?

Dalam jQuery, peristiwa tetikus biasanya digunakan untuk mendapatkan kedudukan tetikus. Walau bagaimanapun, jika anda ingin mendapatkan kedudukan tetikus tanpa menggunakan acara tetikus, anda boleh menggunakan kaedah

. Kaedah ini mengembalikan koordinat offset elemen pertama dalam unsur yang sepadan dengan set relatif kepada dokumen. Berikut adalah contoh mudah: .offset()

var position = $("#element").offset(); // 返回包含top和left属性的对象
console.log("元素位于：" + position.left + "," + position.top);

Bagaimana menggunakan jQuery untuk mendapatkan kedudukan tetikus di dalam elemen?

Untuk mendapatkan kedudukan tetikus di dalam elemen, anda boleh menggunakan kaedah

dengan sifat .offset() dan pageX objek acara. Berikut adalah contoh: pageY

$("#element").mousemove(function(event) {
  var parentOffset = $(this).offset();
  var relX = event.pageX - parentOffset.left;
  var relY = event.pageY - parentOffset.top;
  console.log("X坐标：" + relX + " Y坐标：" + relY);
});

Apakah penggunaan kaedah

dalam jQuery? mousemove() Kaedah

dalam

jQuery digunakan untuk melampirkan fungsi pengendali acara ke acara mousemove(), atau untuk mencetuskan peristiwa pada elemen. Acara ini dihantar ke elemen apabila penunjuk tetikus bergerak di dalam elemen. Ia boleh digunakan untuk mengesan pergerakan tetikus dan melaksanakan operasi mengikut kedudukan tetikus. mousemove

Bagaimana menggunakan jQuery untuk mendapatkan kedudukan penunjuk tetikus?

Anda boleh menggunakan jQuery untuk mendapatkan kedudukan penunjuk tetikus menggunakan sifat

dan event.pageX. Ciri -ciri ini menyediakan kedudukan penunjuk tetikus berbanding dengan tepi kiri dan atas dokumen masing -masing. event.pageY

Bagaimana menggunakan jQuery untuk mencari kedudukan tetikus berbanding dengan elemen?

Untuk mencari kedudukan tetikus berbanding dengan elemen, anda boleh menolak kedudukan elemen dari kedudukan penunjuk tetikus. Berikut adalah contoh:

$("#element").mousemove(function(event) {
  var x = event.pageX - $(this).offset().left;
  var y = event.pageY - $(this).offset().top;
  console.log("X坐标：" + x + " Y坐标：" + y);
});

Ini akan memberi anda kedudukan penunjuk tetikus berbanding dengan elemen yang ditentukan.

membuat pelarasan halus kepada contoh kod untuk menjadikannya lebih jelas dan mudah difahami. Di samping itu, teks itu digilap untuk menjadikannya lebih lancar dan lebih semula jadi.

Atas ialah kandungan terperinci jQuery mendapat kedudukan tetikus relatif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!