Touch.touchType — Eigenschaft · JavaScript-Referenz

Signatur

Touch.touchType

Beschreibung

Die Eigenschaft touchType eines Touch-Objekts gibt als Zeichenkette zurück, welche Art von Eingabegerät den Berührungspunkt erzeugt hat. Mögliche Werte sind "direct" (direkte Berührung mit dem Finger) und "stylus" (Eingabestift, z. B. Apple Pencil).

Das ist vor allem in Zeichen-, Notiz- und Handschrift-Anwendungen nützlich. So lassen sich Stift und Finger unterschiedlich behandeln: Der Stift zeichnet, der Finger verschiebt oder zoomt die Zeichenfläche. Auch eine einfache Handballenerkennung („Palm Rejection“) lässt sich damit umsetzen, indem man Fingerberührungen während einer aktiven Stifteingabe ignoriert.

Die Eigenschaft ist experimentell und nicht standardisiert. Sie wird praktisch nur von WebKit/Safari unterstützt, dort häufig zusammen mit Touch.altitudeAngle und Touch.azimuthAngle für die Stiftneigung. Für plattformübergreifenden Code solltest du stattdessen PointerEvent.pointerType verwenden, das die Werte "mouse", "pen" und "touch" liefert.

Rückgabewert

Typ

"direct" | "stylus" | undefined

Beschreibung

"direct" bei Fingerberührung, "stylus" bei Stifteingabe. In Browsern, die die Eigenschaft nicht unterstützen, ist der Wert undefined.

Beispiele

Eingabeart beim Berühren erkennen

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

canvas.addEventListener('touchstart', (event) => {
  for (const touch of event.changedTouches) {
    const typ = touch.touchType ?? 'unbekannt';
    console.log(`Berührung ${touch.identifier}: ${typ}`);
  }
}, { passive: true });

Berührung 0: stylus

Stift zeichnet, Finger wird ignoriert (Palm Rejection)

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const istStift = (touch) => touch.touchType === 'stylus';

canvas.addEventListener('touchstart', (event) => {
  const stift = [...event.changedTouches].find(istStift);
  if (!stift) return; // Finger/Handballen ignorieren
  event.preventDefault();
  const rect = canvas.getBoundingClientRect();
  ctx.beginPath();
  ctx.moveTo(stift.clientX - rect.left, stift.clientY - rect.top);
}, { passive: false });

canvas.addEventListener('touchmove', (event) => {
  const stift = [...event.changedTouches].find(istStift);
  if (!stift) return;
  event.preventDefault();
  const rect = canvas.getBoundingClientRect();
  // Stiftdruck (force) für die Linienstärke nutzen
  ctx.lineWidth = 1 + (stift.force || 0.5) * 4;
  ctx.lineTo(stift.clientX - rect.left, stift.clientY - rect.top);
  ctx.stroke();
}, { passive: false });

Plattformübergreifender Fallback mit Pointer Events

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

// Hinweis: touchType gibt es nur bei Touch-Objekten (vor allem Safari),
// pointerType funktioniert in allen modernen Browsern.
flaeche.addEventListener('pointerdown', (event) => {
  const geraet = {
    pen: 'Stift',
    touch: 'Finger',
    mouse: 'Maus'
  }[event.pointerType] ?? 'unbekannt';
  console.log(`Eingabe per ${geraet}`);
});

Eingabe per Stift

// Wichtig · Fallstricke

Kompatibilität: Die Eigenschaft ist nicht standardisiert und wird im Wesentlichen nur von Safari (iOS/iPadOS) unterstützt. In Chrome, Firefox und Edge ist sie in der Regel undefined. Prüfe deshalb immer mit 'touchType' in touch oder mit einem Vergleich gegen undefined.
Für neuen, browserübergreifenden Code ist PointerEvent.pointerType die bessere Wahl. Dort heißt der Stift "pen", nicht "stylus".
touchType ist schreibgeschützt. Zuweisungen werden ohne Fehlermeldung ignoriert (im Strict Mode kann ein TypeError auftreten).
Soll preventDefault() in touchstart/touchmove wirken, musst du den Listener mit { passive: false } registrieren. Sonst scrollt die Seite trotzdem.

Siehe auch

Touch Touch.force Touch.altitudeAngle Touch.azimuthAngle TouchEvent PointerEvent.pointerType TextTrack.id