MouseEvent: clientX-Eigenschaft

Die schreibgeschützte clientX-Eigenschaft der MouseEvent-Schnittstelle liefert die horizontale Koordinate innerhalb des Anwendungs-Viewports, an der das Ereignis auftrat (im Gegensatz zur Koordinate innerhalb der gesamten Seite).

Wenn Sie beispielsweise auf den linken Rand des Viewports klicken, ergibt das immer ein Mausereignis mit einem clientX-Wert von 0, unabhängig davon, ob die Seite horizontal gescrollt wird.

Wert

Ein double-Fließkommawert in Pixeln.

Beispiele

Dieses Beispiel zeigt die Koordinaten Ihrer Maus an, wann immer Sie das mousemove-Ereignis auslösen.

HTML

<p>Move your mouse to see its position.</p>
<p id="screen-log"></p>

JavaScript

let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);
function logKey(e) {
 screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• MouseEvent
• clientY
• screenX / screenY
• Koordinatensysteme