Wie kann ich die Mausposition in JavaScript verfolgen?

So verfolgen Sie die Mausposition in JavaScript

Das Verfolgen der Mausposition erfordert den Empfang von Ereignissen wie Mousemove, die die Koordinaten des Mauszeigers melden. Durch die Verarbeitung dieser Ereignisse können wir die aktuelle Position regelmäßig abrufen und anzeigen.

Die folgende Lösung nutzt das an das Fenster angehängte Mousemove-Ereignis:

document.onmousemove = handleMouseMove;

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

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

Erklärung:

1. Der onmousemove-Ereignis-Listener ist dem Dokumentobjekt zugewiesen, wodurch es während des gesamten Dokumentobjekts auf Mausbewegungen lauscht Webseite.
2. Wenn ein Mousemove-Ereignis auftritt, wird die handleMouseMove-Funktion ausgeführt.
3. Innerhalb der Funktion wird das Ereignisobjekt verwendet, um die Mausposition mithilfe von event.pageX und event.pageY abzurufen.
4. Die erhaltenen Koordinaten werden dann in der Konsole protokolliert, die Sie mit dem JavaScript des Browsers anzeigen können Konsole.

Alternative Lösung mit Timer:

Wenn Sie eine Lösung benötigen, die die Mausposition regelmäßig aktualisiert, können Sie den obigen Code mit einer Timer-Funktion kombinieren :

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
  }
}

Hinweis: Es ist wichtig, die Verarbeitung innerhalb des Event-Handlers oder der Timer-Funktion minimal zu halten um eine Überlastung des Browsers zu vermeiden. Erwägen Sie die Optimierung Ihres Codes, indem Sie prüfen, ob sich die Position geändert hat, bevor Sie komplexe Berechnungen oder Aktualisierungen durchführen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Mausposition in JavaScript verfolgen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!