Signatur
Beschreibung
Die schreibgeschützte Eigenschaft Touch.clientX gibt die horizontale Position eines Berührungspunkts in CSS-Pixeln an. Gemessen wird ab dem linken Rand des sichtbaren Viewports. Wie weit die Seite gescrollt ist, spielt dabei keine Rolle: Ein Finger am linken Bildschirmrand liefert immer ungefähr 0, egal wie weit horizontal gescrollt wurde.
Ein Touch-Objekt bekommt man über die Listen touches, targetTouches und changedTouches eines TouchEvent. Jeder Finger ist ein eigenes Touch-Objekt mit eigenem clientX-Wert. So lassen sich auch Gesten mit mehreren Fingern auswerten, zum Beispiel Pinch-Zoom.
Typische Einsatzfälle sind Wischgesten (Swipe), Drag-and-drop auf Touch-Geräten und das Positionieren von Elementen mit position: fixed an der Fingerposition. Außerdem kann man clientX mit Element.getBoundingClientRect() kombinieren: Beide nutzen dasselbe Koordinatensystem, deshalb lässt sich die Position innerhalb eines Elements (etwa eines Canvas) einfach berechnen.
Wenn man die Position relativ zum gesamten Dokument braucht, also einschließlich Scroll-Offset, verwendet man Touch.pageX. Für die Position relativ zum physischen Bildschirm gibt es Touch.screenX.
Rückgabewert
double) und ist schreibgeschützt.Beispiele
Position der Berührung ausgeben
document.addEventListener('touchstart', (event) => {
const touch = event.changedTouches[0];
console.log(`clientX: ${touch.clientX}, clientY: ${touch.clientY}`);
});Horizontale Wischgeste erkennen
const area = document.querySelector('#slider');
let startX = 0;
area.addEventListener('touchstart', (event) => {
startX = event.changedTouches[0].clientX;
}, { passive: true });
area.addEventListener('touchend', (event) => {
const deltaX = event.changedTouches[0].clientX - startX;
const threshold = 50; // Mindestweg in px
if (deltaX > threshold) {
console.log('Wisch nach rechts');
} else if (deltaX < -threshold) {
console.log('Wisch nach links');
}
}, { passive: true });Zeichnen auf einem Canvas (Koordinaten relativ zum Element)
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.addEventListener('touchmove', (event) => {
event.preventDefault(); // Scrollen während des Zeichnens verhindern
const rect = canvas.getBoundingClientRect();
for (const touch of event.changedTouches) {
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
ctx.fillRect(x - 2, y - 2, 4, 4);
}
}, { passive: false });Abstand zweier Finger für Pinch-Zoom
document.addEventListener('touchmove', (event) => {
if (event.touches.length !== 2) return;
const [a, b] = event.touches;
const distance = Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY);
console.log(`Fingerabstand: ${distance.toFixed(1)} px`);
});// Wichtig · Fallstricke
- Die richtige Liste wählen: Bei
touchendundtouchcancelistevent.touchesfür den abgehobenen Finger leer. Die letzte Position steht dann nur noch inevent.changedTouches. clientX,pageXundscreenXnicht verwechseln:clientXignoriert den Scroll-Offset. Wer Positionen im Dokument speichert, zum Beispiel für absolut positionierte Elemente, solltepageXverwenden.- Nicht immer ganze Zahlen: Moderne Browser liefern Werte mit Nachkommastellen. Für pixelgenaue Vergleiche sollte man daher runden.
- Passive Listener:
touchstartundtouchmovesind aufwindow,documentundbodyin Chrome und Safari standardmäßig passiv. Dort bleibtpreventDefault()ohne Wirkung, solange man nicht ausdrücklich{ passive: false }angibt. - Kompatibilität: Touch Events gibt es auf mobilen Browsern praktisch überall. Desktop-Firefox aktiviert sie aber nur auf Geräten mit Touchscreen. Für geräteunabhängigen Code sind Pointer Events (
PointerEvent.clientX) meist die robustere Wahl, weil sie Maus, Stift und Touch einheitlich behandeln. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert und wirft im Strict Mode einen
TypeError.