Element: webkitmouseforcedown — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("webkitmouseforcedown", handler)

Beschreibung

Das Ereignis webkitmouseforcedown ist eine proprietäre Apple-Erweiterung. Es gehört zu den Force-Touch-Ereignissen von Safari unter macOS. Nach einem normalen mousedown auf einem Element sendet Safari webkitmouseforcedown, sobald der Nutzer stark genug auf das Trackpad drückt, dass der Druck als „Force Click“ gilt. Das Ereignis kommt also frühestens nach mousedown und nur, wenn der Druck die Schwelle überschreitet.

Der Handler bekommt ein MouseEvent. Es hat zusätzlich die Eigenschaft webkitForce, die den aktuellen Druck angibt. Die Schwellenwerte stehen als Konstanten bereit: MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN (1.0) für einen normalen Klick und MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN (2.0) für einen Force Click.

Übliche Einsatzfälle sind Zusatzaktionen bei starkem Druck, etwa eine Vorschau, ein Kontextmenü oder eine zweite Aktionsstufe. Wenn du Safaris eigenes Force-Click-Verhalten (z. B. das Nachschlagen im Wörterbuch) verhindern willst, rufe preventDefault() schon im vorher ausgelösten Ereignis webkitmouseforcewillbegin auf.

Registriere den Handler mit addEventListener(). Eine Eigenschaft onwebkitmouseforcedown gibt es nicht zuverlässig. Wenn eine solche Eigenschaft existiert, dann nur in Safari. Für plattformübergreifenden Code ist sie nicht geeignet.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses: `"webkitmouseforcedown"`.
$handler Pflicht	(event: MouseEvent) => void		Callback, der ein `MouseEvent` mit der zusätzlichen Eigenschaft `webkitForce` (Druckstärke als Zahl) erhält.
$options	boolean \| AddEventListenerOptions	false	Übliche Listener-Optionen wie `once`, `capture`, `passive` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener() gibt nichts zurück. Der Handler erhält ein MouseEvent. Das Ereignis steigt im DOM auf (Bubbling) und ist abbrechbar.

Beispiele

Force Click auf einer Karte erkennen

const card = document.querySelector('#produkt-karte');

card.addEventListener('webkitmouseforcedown', (event) => {
  // webkitForce gibt es nur in Safari
  console.log('Force Click! Druck:', event.webkitForce.toFixed(2));
  card.classList.add('vorschau-offen');
});

card.addEventListener('webkitmouseforceup', () => {
  card.classList.remove('vorschau-offen');
});

Force Click! Druck: 2.00

Nur einmal reagieren und Listener wieder entfernen

const button = document.querySelector('#loeschen');

const onForceDown = (event) => {
  if (event.webkitForce >= MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN) {
    console.log('Löschen per Force Click bestätigt');
    button.removeEventListener('webkitmouseforcedown', onForceDown);
  }
};

button.addEventListener('webkitmouseforcedown', onForceDown);

Löschen per Force Click bestätigt

Funktionsprüfung mit Rückfall auf Rechtsklick

const bild = document.querySelector('#galerie-bild');
const zeigeMenue = () => console.log('Kontextmenü geöffnet');

const hatForceTouch = 'WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN' in MouseEvent;

if (hatForceTouch) {
  // Safaris eigenes Force-Click-Verhalten (z. B. Nachschlagen) unterdrücken
  bild.addEventListener('webkitmouseforcewillbegin', (e) => e.preventDefault());
  bild.addEventListener('webkitmouseforcedown', zeigeMenue);
} else {
  bild.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    zeigeMenue();
  });
}

Kontextmenü geöffnet

// Wichtig · Fallstricke

Nicht standardisiert: Das Ereignis gibt es nur in Safari unter macOS, und dort nur mit Force-Touch-Hardware (z. B. Force-Touch-Trackpad oder Magic Trackpad 2). Chrome, Firefox, Edge und iOS-Safari lösen es nicht aus. Baue deshalb immer einen Rückfall ein, etwa über contextmenu, langes Drücken oder pointerdown.
Führe über Force Click keine wichtigen Funktionen aus, die sonst nicht erreichbar sind. Die Geste ist kaum auffindbar und nicht barrierefrei. Biete immer einen gleichwertigen anderen Weg an, auch per Tastatur.
preventDefault() in webkitmouseforcedown ist zu spät, um Safaris eigenes Force-Click-Verhalten zu unterdrücken. Das geht nur in webkitmouseforcewillbegin.
In TypeScript ist webkitForce nicht im Typ MouseEvent enthalten. Du brauchst eine eigene Typ-Erweiterung oder einen Cast.
Den standardisierten Nachfolger für Druckwerte bietet die Pointer-Events-API mit PointerEvent.pressure. Für neuen Code ist sie meist die bessere Wahl.

Siehe auch

webkitmouseforcewillbegin webkitmouseforcechanged webkitmouseforceup mousedown MouseEvent.webkitForce PointerEvent.pressure Element: DOMMouseScroll