Touch.clientY — Eigenschaft · JavaScript-Referenz

Signatur

Touch.clientY

Beschreibung

Touch.clientY gibt die vertikale Position eines einzelnen Berührungspunkts (Touch-Objekt) relativ zur oberen Kante des sichtbaren Viewports zurück. Der Wert wird in CSS-Pixeln angegeben. Wie weit die Seite gescrollt ist, spielt dabei keine Rolle: Eine Berührung ganz oben im sichtbaren Bereich hat immer einen Wert um 0.

Sie erhalten Touch-Objekte über die Listen touches, targetTouches und changedTouches eines TouchEvent, also in den Handlern von touchstart, touchmove, touchend und touchcancel. Der typische Einsatz sind Wischgesten, Pull-to-Refresh, eigene Schieberegler und Drag-&-Drop auf Touch-Geräten. clientY eignet sich besonders gut in Verbindung mit Element.getBoundingClientRect(), denn beide Werte beziehen sich auf den Viewport.

Wenn Sie Koordinaten relativ zum gesamten Dokument brauchen (inklusive Bildlauf), nehmen Sie Touch.pageY. Für Koordinaten relativ zum Bildschirm gibt es Touch.screenY.

Rückgabewert

Typ

number

Beschreibung

Y-Koordinate des Berührungspunkts in CSS-Pixeln relativ zur oberen Kante des Viewports. Kann Nachkommastellen haben und auch negativ sein oder größer als die Viewport-Höhe, wenn der Finger während einer Bewegung den sichtbaren Bereich verlässt.

Beispiele

Position der Berührung beim touchstart ausgeben

document.addEventListener('touchstart', (event) => {
  const touch = event.touches[0];
  console.log(`Berührung bei Y = ${touch.clientY}px (Viewport)`);
});

Berührung bei Y = 312.5px (Viewport)

Vertikale Wischgeste erkennen

let startY = 0;
const SCHWELLE = 50; // Mindestweg in Pixeln

const onStart = (event) => {
  startY = event.changedTouches[0].clientY;
};

const onEnd = (event) => {
  const deltaY = event.changedTouches[0].clientY - startY;
  if (deltaY > SCHWELLE) console.log('Wisch nach unten');
  else if (deltaY < -SCHWELLE) console.log('Wisch nach oben');
};

const area = document.querySelector('#swipe-area');
area.addEventListener('touchstart', onStart, { passive: true });
area.addEventListener('touchend', onEnd);

// Später wieder entfernen:
// area.removeEventListener('touchstart', onStart);
// area.removeEventListener('touchend', onEnd);

Wisch nach oben

Position relativ zu einem Element berechnen (vertikaler Schieberegler)

const slider = document.querySelector('#vertical-slider');

slider.addEventListener('touchmove', (event) => {
  event.preventDefault(); // Scrollen der Seite verhindern
  const rect = slider.getBoundingClientRect();
  const y = event.targetTouches[0].clientY - rect.top;
  // Auf 0–1 begrenzen, oben = 100 %
  const anteil = Math.min(Math.max(1 - y / rect.height, 0), 1);
  slider.dataset.value = Math.round(anteil * 100);
  console.log(`Wert: ${slider.dataset.value} %`);
}, { passive: false });

Wert: 73 %

// Wichtig · Fallstricke

Welche Liste? In touchend und touchcancel ist event.touches für den losgelassenen Finger schon leer. Lesen Sie dort den Wert aus event.changedTouches.
Bezugssystem: clientY bezieht sich auf den Viewport, pageY auf das Dokument (mit Bildlauf) und screenY auf den Bildschirm. Wer diese Werte verwechselt, bekommt auf gescrollten Seiten falsche Positionen.
Passive Listener: Chrome und Safari registrieren touchstart und touchmove auf window, document und body standardmäßig als passiv. preventDefault() funktioniert dann nur, wenn Sie { passive: false } angeben.
Zoom: Beim Pinch-Zoom auf Mobilgeräten bezieht sich clientY auf den Layout-Viewport. Den visuellen Viewport liefert bei Bedarf window.visualViewport.
Kompatibilität: Touch Events gibt es in allen mobilen Browsern und in Chrome, Edge und Firefox auf Touch-fähiger Hardware. Desktop-Safari unterstützt sie nicht. Wenn Sie Maus, Stift und Touch einheitlich behandeln wollen, sind Pointer Events (PointerEvent.clientY) meist die bessere Wahl.

Siehe auch

Touch.clientX Touch.pageY Touch.screenY TouchEvent TouchEvent.changedTouches Element.getBoundingClientRect() MouseEvent.clientY