Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Menjejaki Kedudukan Tetikus dalam Javascript Menggunakan Acara dan Pemasa?

Bagaimanakah Saya Boleh Menjejaki Kedudukan Tetikus dalam Javascript Menggunakan Acara dan Pemasa?

DDD
Lepaskan: 2024-12-10 21:06:11
asal
311 orang telah melayarinya

How Can I Track Mouse Position in Javascript Using Events and Timers?

Menjejaki Kedudukan Tetikus dalam Javascript

Dalam Javascript, menjejaki kedudukan tetikus secara berkala memerlukan melanggan acara mousemove.

Menggunakan Acara Mousemove

Kaedah yang paling biasa melibatkan penggunaan pengendali acara mousemove. Berikut ialah coretan kod:

document.addEventListener('mousemove', (event) => {
  // Event details...
});
Salin selepas log masuk

Dalam pengendali acara, anda boleh mengakses koordinat X dan Y tetikus melalui event.clientX dan event.clientY.

Nota tentang Buih Acara

Perhatikan bahawa acara mousemove berbuih. Ini bermakna jika anda melampirkan pengendali acara pada objek dokumen (seperti yang dilihat di atas), anda akan menerima acara walaupun apabila tetikus berada di luar unsur yang boleh dilihat. Anda boleh memilih untuk melampirkan pengendali acara pada elemen tertentu sebaliknya, jika dikehendaki.

Menggunakan Pendekatan Berasaskan Pemasa

Untuk pendekatan berasaskan pemasa, anda boleh menggabungkan pengendali gerakan tetikus dengan pembolehubah keadaan dan setInterval. Ini memastikan anda mendapatkan semula kedudukan tetikus secara berkala, tanpa mengira pergerakan tetikus.

let mousePos;

document.addEventListener('mousemove', (event) => {
  mousePos = {
    x: event.clientX,
    y: event.clientY
  };
});

setInterval(() => {
  // Use mousePos.x and mousePos.y
}, 100); // 100ms interval
Salin selepas log masuk

Batasan dan Pertimbangan

Perhatikan bahawa mengambil semula kedudukan tetikus semata-mata melalui pemasa biasanya tidak boleh dipercayai. Anda mesti mempunyai pencetus peristiwa terlebih dahulu sebelum mendapatkan data yang tepat. Tambahan pula, pengundian yang berlebihan boleh menjejaskan prestasi penyemak imbas, terutamanya dalam versi lama. Pastikan kod pemprosesan anda minimum dalam pengendali acara ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjejaki Kedudukan Tetikus dalam Javascript Menggunakan Acara dan Pemasa?. 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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan