MouseEvent: clientY-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die schreibgeschützte clientY-Eigenschaft des MouseEvent-Interfaces liefert die vertikale Koordinate innerhalb des Viewports der Anwendung, an der das Ereignis aufgetreten ist (im Gegensatz zur Koordinate innerhalb der Seite).

Ein Klick auf den oberen Rand des Viewports führt zum Beispiel immer zu einem Mausereignis mit einem clientY-Wert von 0, unabhängig davon, ob die Seite vertikal gescrollt ist oder nicht.

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