Element: webkitmouseforceup — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("webkitmouseforceup", handler)

Beschreibung

Das Ereignis webkitmouseforceup gibt es nur in Safari unter macOS, und zwar auf Geräten mit Force-Touch-Trackpad. Safari löst es an einem Element aus, wenn vorher ein webkitmouseforcedown kam und der Druck danach so weit nachgelassen hat, dass kein „Force-Click“ (fester Klick) mehr vorliegt. Die beiden Ereignisse bilden also ein Paar: Beginn und Ende eines festen Klicks.

Das Ereignis ist ein MouseEvent. In Safari hat es zusätzlich die Eigenschaft webkitForce, die den aktuellen Druck angibt. Als Vergleichswerte dienen die Konstanten MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN (normaler Klick, 1) und MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN (fester Klick, 2).

Einsatzfälle sind zum Beispiel das Schließen einer Vorschau, die per Force-Click geöffnet wurde, oder das Zurücksetzen einer visuellen Rückmeldung. Das Ereignis lässt sich mit addEventListener() registrieren. Eine Eigenschaft onwebkitmouseforceup gibt es nicht zuverlässig. Für neuen Code, der in allen Browsern laufen soll, ist die standardisierte Pointer-Events-API mit PointerEvent.pressure die bessere Wahl.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"webkitmouseforceup"`.
$handler Pflicht	(event: MouseEvent) => void		Callback-Funktion. Sie erhält ein `MouseEvent`, das in Safari die zusätzliche Eigenschaft `webkitForce` hat.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `passive`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener() gibt nichts zurück.

Beispiele

Ende eines Force-Clicks erkennen

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

card.addEventListener('webkitmouseforcedown', () => {
  card.classList.add('pressed-hard');
});

card.addEventListener('webkitmouseforceup', (event) => {
  card.classList.remove('pressed-hard');
  console.log('Force-Click beendet, Druck:', event.webkitForce);
});

Force-Click beendet, Druck: 1.8

Vorschau-Popup per Force-Click öffnen und schließen

const link = document.querySelector('a.preview');
const popup = document.querySelector('#preview-popup');

const openPreview = () => { popup.hidden = false; };
const closePreview = () => { popup.hidden = true; };

link.addEventListener('webkitmouseforcedown', openPreview);
link.addEventListener('webkitmouseforceup', closePreview);

Listener wieder entfernen (removeEventListener / AbortController)

const button = document.querySelector('#force-btn');
const controller = new AbortController();

const onForceUp = (event) => {
  console.log('forceup bei', event.clientX, event.clientY);
};

// Variante 1: über ein AbortSignal
button.addEventListener('webkitmouseforceup', onForceUp, { signal: controller.signal });

// Später: alle damit registrierten Listener entfernen
controller.abort();

// Variante 2: klassisch mit removeEventListener
button.addEventListener('webkitmouseforceup', onForceUp);
button.removeEventListener('webkitmouseforceup', onForceUp);

Feature-Erkennung mit Fallback auf Pointer Events

const el = document.querySelector('#target');
const supportsForce = 'WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN' in MouseEvent;

if (supportsForce) {
  el.addEventListener('webkitmouseforceup', () => console.log('Safari: Force-Up'));
} else {
  el.addEventListener('pointerup', (e) => {
    console.log('Standard: pointerup, Druck', e.pressure);
  });
}

Standard: pointerup, Druck 0

// Wichtig · Fallstricke

Nicht standardisiert: Das Ereignis gehört zu keiner Spezifikation und funktioniert nur in Safari unter macOS mit Force-Touch-Hardware. Chrome, Firefox, Edge und iOS-Safari lösen es nicht aus.
Einen feuernden Listener gibt es nicht ohne ein vorheriges webkitmouseforcedown. Die Druckwerte während des Klicks liefert webkitmouseforcechanged.
Eine Handler-Eigenschaft onwebkitmouseforceup ist nicht verlässlich vorhanden. Verwende addEventListener().
Funktionen sollten nie nur über Force-Click erreichbar sein. Viele Nutzer haben keine passende Hardware, und für Tastatur- und Screenreader-Nutzer ist das eine Barriere. Biete immer eine Alternative an.
Für Code, der in allen Browsern laufen soll: pointerup und PointerEvent.pressure verwenden.

Siehe auch

webkitmouseforcedown webkitmouseforcechanged webkitmouseforcewillbegin MouseEvent.webkitForce pointerup PointerEvent.pressure Element: DOMActivate