Signatur
Beschreibung
Die schreibgeschützte Eigenschaft screenX gibt die X-Koordinate des Mauszeigers zum Zeitpunkt des Ereignisses zurück, und zwar relativ zum Bildschirm, nicht relativ zum Browserfenster oder zum Dokument. Der Wert ist in CSS-Pixeln angegeben und seit der Spezifikation CSSOM View ein double. Nachkommastellen sind also möglich.
Bei mehreren Monitoren bezieht sich der Wert auf den gesamten virtuellen Desktop. Deshalb kann er auch negativ sein, etwa wenn ein zweiter Monitor links vom Hauptbildschirm steht. Praktisch ist screenX vor allem, wenn Positionen fensterübergreifend verglichen werden sollen, zum Beispiel beim Platzieren von Popup-Fenstern mit window.open() oder beim Ziehen zwischen mehreren Fenstern.
Für die meisten Aufgaben im Layout passen andere Koordinaten besser: clientX (relativ zum sichtbaren Viewport), pageX (relativ zum Dokument, Scrollen eingerechnet) oder offsetX (relativ zum Zielelement). screenX ist auch bei PointerEvent, WheelEvent und DragEvent verfügbar, weil diese von MouseEvent erben. Bei synthetischen Ereignissen lässt sich der Wert über das Initialisierungsobjekt des Konstruktors new MouseEvent() setzen.
Rückgabewert
Beispiele
Koordinaten beim Klick vergleichen
document.addEventListener('click', (event) => {
console.log(`screenX: ${event.screenX}`);
console.log(`clientX: ${event.clientX}`);
console.log(`pageX: ${event.pageX}`);
});Popup-Fenster an der Mausposition öffnen
const button = document.querySelector('#hilfe');
button.addEventListener('click', (event) => {
const breite = 320;
const hoehe = 240;
// Popup rechts unterhalb des Zeigers platzieren
const left = Math.round(event.screenX + 10);
const top = Math.round(event.screenY + 10);
window.open(
'/hilfe.html',
'hilfe',
`width=${breite},height=${hoehe},left=${left},top=${top}`
);
});Horizontale Zugstrecke unabhängig vom Scrollen messen
let startX = null;
const griff = document.querySelector('.griff');
griff.addEventListener('pointerdown', (event) => {
startX = event.screenX;
griff.setPointerCapture(event.pointerId);
});
griff.addEventListener('pointermove', (event) => {
if (startX === null) return;
const delta = event.screenX - startX;
griff.style.transform = `translateX(${delta}px)`;
});
griff.addEventListener('pointerup', () => {
startX = null;
});Synthetisches Ereignis mit screenX erzeugen
const ereignis = new MouseEvent('click', {
screenX: 150,
screenY: 90,
clientX: 50,
clientY: 30,
bubbles: true
});
document.body.addEventListener('click', (e) => {
console.log(e.screenX, e.isTrusted);
}, { once: true });
document.body.dispatchEvent(ereignis);// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
event.screenX = 10hat keine Wirkung. Werte für synthetische Ereignisse setzt man über den Konstruktornew MouseEvent(type, { screenX }). - Negative Werte: Bei mehreren Monitoren kann
screenXkleiner als 0 sein. Code, der nur positive Werte erwartet, kann dann Fehler verursachen. - Nicht fürs Layout geeignet: Zum Positionieren von Elementen im Dokument nimmt man
clientXoderpageX.screenXhängt von der Fensterposition ab. - Datenschutz: Manche Browser oder Anti-Fingerprinting-Modi (z. B.
resistFingerprintingin Firefox) können die Bildschirmkoordinaten verfälschen oder auf Fensterkoordinaten reduzieren. Außerdem gibt es in Browsern mit Wayland Einschränkungen. - Typ: Ältere Spezifikationen nannten
longals Typ, aktuelle Browser liefern teils Gleitkommazahlen. Für Fensterpositionen inwindow.open()sollte man daher runden. - Kompatibilität: Wird von allen gängigen Browsern seit Langem unterstützt. Bei Touch-Ereignissen stehen die Werte stattdessen auf den einzelnen
Touch-Objekten (touch.screenX).