Bagaimanakah Saya Boleh Menjejaki Kedudukan Tetikus dalam JavaScript?

Cara Menjejaki Kedudukan Tetikus dalam JavaScript

Menjejaki kedudukan tetikus melibatkan penerimaan peristiwa, seperti mousemove, yang melaporkan koordinat kursor tetikus. Dengan mengendalikan acara ini, kami boleh mendapatkan semula dan memaparkan kedudukan semasa secara berkala.

Penyelesaian berikut memanfaatkan peristiwa gerakan tetikus yang dilampirkan pada tetingkap:

document.onmousemove = handleMouseMove;

function handleMouseMove(event) {
  var posX = event.pageX;
  var posY = event.pageY;

  console.log(`Current Position: ${posX}, ${posY}`);
}

Penjelasan:

1. Pendengar acara onmousemove diberikan kepada objek dokumen, menyebabkan ia mendengar tetikus pergerakan di seluruh halaman web.
2. Apabila acara mousemove berlaku, fungsi handleMouseMove dilaksanakan.
3. Di dalam fungsi, objek acara digunakan untuk mendapatkan semula kedudukan tetikus menggunakan event.pageX dan acara. pageY.
4. Koordinat yang diperoleh kemudian dilog ke konsol, yang boleh anda lihat menggunakan JavaScript pelayar konsol.

Penyelesaian Alternatif dengan Pemasa:

Jika anda memerlukan penyelesaian yang mengemas kini kedudukan tetikus secara berkala, anda boleh menggabungkan kod di atas dengan fungsi pemasa :

var mousePos;

document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // Update every 100ms

function handleMouseMove(event) {
  mousePos = {
    x: event.pageX,
    y: event.pageY,
  };
}

function getMousePosition() {
  if (!mousePos) {
    // Handle case where mouse position has not been set yet
  } else {
    // Use the stored mousePos.x and mousePos.y values
  }
}

Nota: Adalah penting untuk memastikan pemprosesan dalam pengendali acara atau fungsi pemasa minimum untuk mengelakkan penyemak imbas keterlaluan. Pertimbangkan untuk mengoptimumkan kod anda dengan menyemak sama ada kedudukan telah berubah sebelum melakukan pengiraan atau kemas kini yang rumit.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjejaki Kedudukan Tetikus dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!