Bagaimana untuk Mendapatkan Kedudukan Tetikus Relatif kepada Elemen dalam JavaScript?

Mendapatkan Kedudukan Tetikus Berkaitan dengan Elemen

Mendapatkan kedudukan tetikus berbanding elemen tertentu adalah penting untuk aplikasi interaktif seperti lukisan berasaskan kanvas aplikasi. Untuk mencapai matlamat ini, kami boleh menggunakan kaedah getBoundingClientRect().

Pertimbangkan coretan kod JavaScript berikut:

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
  var y = e.clientY - rect.top;  //y position within the element.
  console.log("Left? : " + x + " ; Top? : " + y + ".");
};</code>

Dalam contoh ini, kami melampirkan acara onclick pada elemen dengan ID "klik saya." Apabila diklik, pengendali acara mendapatkan semula segi empat tepat sempadan unsur yang diklik menggunakan getBoundingClientRect(). Segi empat tepat ini mewakili kedudukan dan dimensi elemen pada skrin.

Untuk mengira kedudukan tetikus berbanding elemen, kami menolak koordinat kiri dan atas segi empat tepat terikat daripada sifat clientX dan clientY acara klik. Ini memberi kita x dan y, yang mewakili kedudukan tetikus dalam elemen yang diklik.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Kedudukan Tetikus Relatif kepada Elemen dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!