Touch.force — Eigenschaft · JavaScript-Referenz

Signatur

Touch.force

Beschreibung

Die Eigenschaft Touch.force gibt an, wie stark der Benutzer für einen bestimmten Berührungspunkt auf die Oberfläche drückt. Der Wert ist eine Gleitkommazahl im Bereich von 0.0 bis 1.0. Dabei steht 0.0 für keinen messbaren Druck und 1.0 für den höchsten Druck, den die Hardware erfassen kann.

Sinnvoll ist force für druckabhängige Interaktionen, etwa variable Strichstärken in Zeichen-Apps, „Drücken zum Vorschauen“-Gesten oder die Unterscheidung zwischen leichtem Tippen und festem Drücken. Den Wert liest man aus den Touch-Objekten der Listen touches, targetTouches oder changedTouches eines TouchEvent.

Viele Geräte haben keinen Drucksensor. Dann liefert die Eigenschaft meist konstant 0 oder 1, oder sie ist gar nicht vorhanden (undefined). Druckabhängiges Verhalten sollte deshalb immer eine Alternative für Geräte ohne echte Druckwerte haben. Für neue Projekte sind Pointer Events mit PointerEvent.pressure meist die bessere Wahl, weil sie Maus, Stift und Touch einheitlich abdecken.

Rückgabewert

Typ

number

Beschreibung

Gleitkommazahl zwischen 0.0 und 1.0, die den relativen Druck angibt. Auf Geräten ohne Drucksensor meist ein fester Wert (0 oder 1) oder undefined.

Beispiele

Druck beim Berühren auslesen

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

pad.addEventListener('touchstart', (event) => {
  for (const touch of event.changedTouches) {
    const force = touch.force ?? 0;
    console.log(`Touch ${touch.identifier}: Druck ${force.toFixed(2)}`);
  }
}, { passive: true });

Touch 0: Druck 0.42

Druckabhängige Strichstärke beim Zeichnen

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

const toPoint = (touch) => {
  const rect = canvas.getBoundingClientRect();
  return { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
};

canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  last = toPoint(e.changedTouches[0]);
}, { passive: false });

canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touch = e.changedTouches[0];
  const point = toPoint(touch);
  // Ohne Drucksensor liefert force oft 0 → Standardwert 0.5 verwenden
  const force = touch.force > 0 ? touch.force : 0.5;
  ctx.lineWidth = 1 + force * 12;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(last.x, last.y);
  ctx.lineTo(point.x, point.y);
  ctx.stroke();
  last = point;
}, { passive: false });

Festes Drücken erkennen (Force-Touch-Geste)

const card = document.querySelector('.card');
const THRESHOLD = 0.75;

const onMove = (e) => {
  const touch = e.targetTouches[0];
  if (touch && touch.force >= THRESHOLD) {
    card.classList.add('preview');
  }
};

card.addEventListener('touchmove', onMove, { passive: true });
card.addEventListener('touchend', () => {
  card.classList.remove('preview');
});

// Später wieder entfernen:
// card.removeEventListener('touchmove', onMove);

Prüfen, ob echte Druckwerte vorliegen

const hasRealPressure = (touch) =>
  typeof touch.force === 'number' && touch.force > 0 && touch.force < 1;

document.addEventListener('touchmove', (e) => {
  const touch = e.touches[0];
  console.log(hasRealPressure(touch)
    ? `Drucksensor aktiv: ${touch.force}`
    : 'Kein variabler Druck verfügbar');
}, { passive: true });

Kein variabler Druck verfügbar

// Wichtig · Fallstricke

Hardwareabhängig: Echte Druckwerte gibt es nur auf Geräten mit passender Sensorik, etwa iPhones mit 3D Touch, dem Apple Pencil auf dem iPad oder einzelnen Android-Geräten. Sonst ist der Wert meist 0 oder 1. Ein Wert von 0 heißt also nicht zwingend, dass kein Druck ausgeübt wurde.
Browser-Kompatibilität: Firefox auf dem Desktop unterstützt die Eigenschaft nicht oder nur hinter einem Flag. Safari unterstützt sie auf iOS. Chrome unterstützt sie auf Android, auf dem Desktop aber meist ohne echte Werte. Vor der Nutzung sollte man auf typeof touch.force === 'number' prüfen.
Nicht mit webkitForce verwechseln: Das ältere MouseEvent.webkitForce für Force Touch auf dem Mac ist nicht standardisiert und hat einen anderen Wertebereich.
Passive Listener: Wer beim Zeichnen das Scrollen verhindern will, muss den Listener mit { passive: false } registrieren und preventDefault() aufrufen.
Alternative: PointerEvent.pressure ist breiter unterstützt und funktioniert für Maus, Stift und Touch gleichermaßen.
Die Eigenschaft ist nur lesbar. Zuweisungen werden ignoriert.

Siehe auch

Touch PressureRecord.source Touch.target Touch.pageX Touch.pageY