Mausposition verfolgen in JavaScript

Verfolgen Sie Mausbewegungen, indem Sie eine Callback-Funktion für das mousemove-Ereignis des Browsers registrieren. Der Callback erhält ein MouseEvent; lesen Sie dessen Koordinateneigenschaften direkt aus diesem Ereignis aus, statt einen separaten Mauszeigerzustand zu speichern. Das Ereignis wird ausgelöst, wenn sich der Mauszeiger über dem Fenster bewegt. So kann der Handler bei jeder Bewegung die aktuelle Position auslesen.

Mausbewegungen mit dem mousemove-Ereignis erfassen

Ein Ereignis-Listener besteht aus einem Ereignistyp und einem Callback. Im folgenden Browserbeispiel registriert window.addEventListener den Handler handleMouseMove für mousemove. Der Callback liest pageX, pageY, clientX und clientY aus. Bei den Eigenschaftsnamen ist die Groß- und Kleinschreibung relevant. Das Ereignis mousemove meldet Mausbewegungen; es wird weder beim Laden der Seite noch bei stillstehendem Mauszeiger ausgelöst.

Das kleine ausführbare Beispiel zeigt, wie der Callback die Ereigniswerte formatiert. Sein einfaches Objekt dient als Beispieldatensatz, um die Eigenschaftsnamen zu veranschaulichen. Verwenden Sie auf einer interaktiven Seite ein echtes Browser-MouseEvent.

Führen Sie dieses Beispiel aus:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

function handleMouseMove(event) {
  console.log(
    `page: (${event.pageX}, ${event.pageY}); client: (${event.clientX}, ${event.clientY})`
  );
}

handleMouseMove({ pageX: 120, pageY: 240, clientX: 120, clientY: 240 });

Für die Interaktion im Browser verwenden Sie diese eigenständige Seite. Durch ihren langen Inhalt lässt sich das Dokument scrollen. Der Handler protokolliert beide Koordinatenpaare, sobald sich der Mauszeiger über der Seite bewegt.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mouse coordinates</title>
  <style>
    body { min-height: 1600px; font: 16px sans-serif; }
    main { padding: 2rem; }
  </style>
</head>
<body>
  <main>
    <h1>Move the pointer, then scroll</h1>
    <p>Open the browser developer console to compare the coordinate pairs.</p>
  </main>
  <script>
    window.addEventListener('mousemove', (event) => {
      console.log(
        `page: (${event.pageX}, ${event.pageY}); client: (${event.clientX}, ${event.clientY})`
      );
    });
  </script>
</body>
</html>

Zwischen Dokument- und Viewport-Koordinaten wählen

pageX und pageY messen die Mausposition ausgehend von der linken oberen Ecke des Dokuments. Sie berücksichtigen den Scrollversatz des Dokuments und eignen sich daher, wenn eine Position beim Scrollen an den Inhalt gebunden bleiben soll. Verwenden Sie beispielsweise Dokumentkoordinaten, um die Position eines Punktes in einem langen Dokument festzuhalten.

clientX und clientY messen die Position ausgehend von der linken oberen Ecke des sichtbaren Viewports. Durch Scrollen ändert sich dieser Ursprung nicht. Verwenden Sie diese Werte, wenn Sie etwas innerhalb des aktuell sichtbaren Browserbereichs positionieren oder vergleichen möchten, etwa eine eigene Markierung für den Mauszeiger oder ein Viewport-Overlay.

Die beiden Paare gehören zu unterschiedlichen Koordinatensystemen. Verwenden Sie für eine Berechnung daher durchgehend dasselbe Paar. Werden Dokument- und Viewport-Koordinaten gemischt, kann sich das Ergebnis um den Scrollversatz verschieben. Damit ein Element dem Mauszeiger folgt, sind außerdem weitere Mausereignisse und eine Logik zur Positionierung des Elements erforderlich. Das Auslesen der Koordinaten allein bewegt kein Element.

pageX und clientX beim Scrollen vergleichen

Vor dem Scrollen fallen der Dokumentursprung und der Viewport-Ursprung zusammen. Deshalb stimmen die horizontalen Werte pageX und clientX überein, ebenso wie pageY und clientY. Bewegen Sie den Mauszeiger und sehen Sie sich beide Paare in der Konsole an. Die erste bereitgestellte Ansicht zeigt die Konsole vor dem Scrollen.

Wenn Sie nach unten scrollen, bleiben die horizontalen Werte im Allgemeinen aufeinander abgestimmt. Der vertikale Wert pageY enthält dagegen die zurückgelegte Scrollstrecke, während clientY weiterhin von der oberen Viewport-Kante aus gemessen wird. Die Differenz zwischen den vertikalen Werten entspricht dem aktuellen Scrollversatz. Die zweite bereitgestellte Ansicht zeigt die Konsole nach dem Scrollen.

Verwenden Sie clientX und clientY für Positionen relativ zum aktuell sichtbaren Bereich. Verwenden Sie pageX und pageY für Positionen relativ zum Dokument einschließlich seines gescrollten Inhalts. Eine Übersicht weiterer Mausereignisse im Browser finden Sie in der MDN-Referenz zu Mausereignissen.