Touch.screenX — Eigenschaft · JavaScript-Referenz

Signatur

Touch.screenX

Beschreibung

Die schreibgeschützte Eigenschaft Touch.screenX gibt die X-Koordinate eines einzelnen Berührungspunkts (Touch-Objekt) zurück. Gemessen wird in CSS-Pixeln vom linken Rand des Bildschirms aus, nicht vom Viewport und nicht vom Dokument. Bildlauf und die Position des Browserfensters auf dem Bildschirm spielen für den Bezugspunkt keine Rolle. Der Wert hängt also nur davon ab, wo auf dem physischen Display der Finger liegt.

An Touch-Objekte kommt man über die Listen touches, targetTouches und changedTouches eines TouchEvent. Jeder Eintrag steht für einen Finger oder Stift, also gibt es für jeden Berührungspunkt einen eigenen screenX-Wert.

In der Praxis braucht man screenX eher selten. Für Layout, Hit-Testing oder Zeichnen auf einem Canvas passen clientX (relativ zum Viewport) oder pageX (relativ zum Dokument, mit Bildlauf) fast immer besser. screenX lohnt sich vor allem für Gesten über mehrere Fenster hinweg, für Auswertungen zur Bildschirmposition oder für den Abgleich mit window.screenX bzw. screen.width.

Rückgabewert

Typ

number

Beschreibung

X-Koordinate des Berührungspunkts in CSS-Pixeln relativ zum linken Bildschirmrand. Kann Nachkommastellen enthalten (double).

Beispiele

Bildschirmkoordinate beim Berühren ausgeben

const flaeche = document.querySelector('#flaeche');

flaeche.addEventListener('touchstart', (event) => {
  // Den ersten Finger auswerten, der diese Berührung ausgelöst hat
  const touch = event.changedTouches[0];
  console.log(`screenX: ${touch.screenX}, clientX: ${touch.clientX}`);
}, { passive: true });

screenX: 412, clientX: 180

Alle aktiven Finger beim Multitouch auflisten

document.addEventListener('touchmove', (event) => {
  const positionen = Array.from(event.touches, (t) => ({
    id: t.identifier,
    screenX: Math.round(t.screenX)
  }));
  console.table(positionen);
}, { passive: true });

┌─────────┬────┬─────────┐ │ (index) │ id │ screenX │ │ 0 │ 0 │ 120 │ │ 1 │ 1 │ 340 │ └─────────┴────┴─────────┘

Wischgeste am Bildschirmrand erkennen

const RANDBREITE = 30; // Pixel
let startX = null;

document.addEventListener('touchstart', (event) => {
  const x = event.changedTouches[0].screenX;
  // Nur Gesten merken, die am rechten Bildschirmrand beginnen
  startX = x >= screen.width - RANDBREITE ? x : null;
}, { passive: true });

document.addEventListener('touchend', (event) => {
  if (startX === null) return;
  const distanz = startX - event.changedTouches[0].screenX;
  if (distanz > 80) {
    console.log('Wischgeste vom rechten Rand erkannt:', Math.round(distanz), 'px');
  }
  startX = null;
});

Wischgeste vom rechten Rand erkannt: 142 px

// Wichtig · Fallstricke

Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ohne Fehlermeldung ignoriert, im Strict Mode gibt es einen TypeError.
Beim Ereignis touchend ist die Liste event.touches leer, wenn der letzte Finger abgehoben wurde. Den abgehobenen Finger findet man dann in changedTouches.
Bezugspunkt beachten: screenX lässt sich nicht direkt mit getBoundingClientRect() vergleichen. Für Positionen im Dokument nimmt man clientX oder pageX.
Bei mehreren Monitoren oder Bildschirmzoom (Pinch-Zoom) können die Werte je nach Browser abweichen. Auf dem Desktop-Monitor, der nicht der Hauptbildschirm ist, sind auch negative Werte möglich.
Datenschutz: Manche Browser runden Bildschirmkoordinaten oder verfälschen sie absichtlich, um Fingerprinting zu erschweren.
Kompatibilität: Touch Events gibt es in allen mobilen Browsern und in Chromium-basierten Desktop-Browsern. Firefox auf dem Desktop aktiviert sie nur auf Touch-Geräten. Safari auf macOS unterstützt sie nicht, dort nimmt man die Pointer Events mit PointerEvent.screenX, die inzwischen ohnehin die empfohlene Alternative sind.
Performance: Listener für touchstart und touchmove sollten mit { passive: true } registriert werden, sonst leidet das Scrollen.

Siehe auch

Touch Touch.screenY Touch.clientX Touch.clientY Touch.force