Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mendapatkan Kedudukan Tetikus Relatif kepada Elemen dalam JavaScript?

Bagaimana untuk Mendapatkan Kedudukan Tetikus Relatif kepada Elemen dalam JavaScript?

Mary-Kate Olsen
Lepaskan: 2024-11-03 18:01:30
asal
476 orang telah melayarinya

How to Get the Mouse Position Relative to an Element in 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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan