Touch.pageX — Eigenschaft · JavaScript-Referenz

Signatur

Touch.pageX

Beschreibung

Die schreibgeschützte Eigenschaft Touch.pageX gibt die horizontale Position eines Fingers oder Stifts in CSS-Pixeln an. Gemessen wird ab der linken Kante des Dokuments, nicht des sichtbaren Bereichs. Ist die Seite horizontal gescrollt, ist die gerade sichtbare Scrollstrecke schon im Wert enthalten. Es gilt also ungefähr: pageX = clientX + window.scrollX.

Man erreicht die Eigenschaft über die Touch-Objekte in den Listen touches, targetTouches und changedTouches eines TouchEvent. Nutzen Sie pageX, wenn Sie Elemente absolut im Dokument platzieren wollen, zum Beispiel Markierungen, Tooltips mit position: absolute oder Zeichnungen, die mit der Seite mitscrollen.

Für Positionen, die fest am Bildschirm hängen (position: fixed), ist clientX die richtige Wahl. Für Koordinaten innerhalb eines bestimmten Elements rechnen Sie pageX mit der Dokumentposition des Elements um, oder Sie verwenden clientX zusammen mit getBoundingClientRect().

Rückgabewert

Typ

number

Beschreibung

X-Koordinate in CSS-Pixeln relativ zum Dokumentursprung, einschließlich horizontalem Scrollversatz. Der Wert kann Nachkommastellen haben (double).

Beispiele

Berührungsposition beim Antippen protokollieren

document.addEventListener('touchstart', (event) => {
  const touch = event.changedTouches[0];
  console.log(`pageX: ${touch.pageX}, clientX: ${touch.clientX}, scrollX: ${window.scrollX}`);
});

pageX: 520, clientX: 120, scrollX: 400

Markierung absolut im Dokument setzen

document.addEventListener('touchend', (event) => {
  for (const touch of event.changedTouches) {
    const dot = document.createElement('div');
    dot.className = 'touch-dot';
    Object.assign(dot.style, {
      position: 'absolute',
      left: `${touch.pageX - 5}px`,
      top: `${touch.pageY - 5}px`,
      width: '10px',
      height: '10px',
      borderRadius: '50%',
      background: 'crimson'
    });
    document.body.append(dot);
  }
});

Horizontale Wischgeste erkennen

let startX = null;

document.addEventListener('touchstart', (e) => {
  startX = e.touches[0].pageX;
}, { passive: true });

document.addEventListener('touchend', (e) => {
  if (startX === null) return;
  const deltaX = e.changedTouches[0].pageX - startX;
  if (Math.abs(deltaX) > 50) {
    console.log(deltaX > 0 ? 'Wisch nach rechts' : 'Wisch nach links');
  }
  startX = null;
}, { passive: true });

Wisch nach links

pageX in Element-Koordinaten umrechnen

const canvas = document.querySelector('canvas');

canvas.addEventListener('touchmove', (e) => {
  e.preventDefault(); // Scrollen während des Zeichnens verhindern
  const rect = canvas.getBoundingClientRect();
  const touch = e.targetTouches[0];
  const x = touch.pageX - (rect.left + window.scrollX);
  console.log('X im Canvas:', Math.round(x));
}, { passive: false });

X im Canvas: 87

// Wichtig · Fallstricke

Die richtige Liste wählen: Bei touchend und touchcancel ist event.touches für den losgelassenen Finger bereits leer. Lesen Sie pageX dort aus changedTouches.
Nicht mit clientX verwechseln: pageX enthält den Scrollversatz, clientX nicht. Für Elemente mit position: fixed führt pageX auf gescrollten Seiten zu falschen Positionen.
Zoomen: Beim Pinch-Zoom können visueller und Layout-Viewport voneinander abweichen. pageX bezieht sich auf das Layout. Für die exakte Bildschirmposition steht screenX zur Verfügung.
Passive Listener: Chrome und andere Browser behandeln touchstart- und touchmove-Listener auf window/document standardmäßig als passiv. Wer preventDefault() aufrufen will, muss { passive: false } angeben.
Kompatibilität: Touch Events gibt es auf allen mobilen Browsern. In Desktop-Browsern stehen sie nur bei Touch-Hardware zur Verfügung, Safari auf macOS kennt sie gar nicht. Für Eingaben, die Maus, Stift und Touch gleichermaßen abdecken sollen, empfiehlt sich die Pointer Events API (PointerEvent.pageX).

Siehe auch

Touch.pageY Touch.clientX Touch.screenX Touch TouchEvent TouchEvent.changedTouches MouseEvent.pageX PointerEvent