Signatur
Beschreibung
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN ist eine statische Zahlenkonstante am Konstruktor MouseEvent. Sie gehört zur Force-Touch-Erweiterung von Apple in Safari. Ihr Wert gibt an, ab welcher Druckstärke das Trackpad einen „Force-Klick“ (tiefer Klick) erkennt. In Safari hat sie den Wert 2. Die Schwelle für einen normalen Klick liefert MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN (Wert 1).
Nützlich ist die Konstante zusammen mit der Instanz-Eigenschaft event.webkitForce, die die aktuelle Kraft angibt. Im Event webkitmouseforcechanged kann man webkitForce mit den beiden Schwellen vergleichen. So lässt sich z. B. anzeigen, wie nah der Nutzer am Force-Klick ist, oder eine Aktion vorzeitig auslösen.
Weil die Konstante statisch ist, liest man sie direkt über MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN aus, nicht über ein Event-Objekt. In allen anderen Browsern ist sie undefined. Deshalb sollte man immer prüfen, ob sie vorhanden ist, bevor man sie benutzt.
Rückgabewert
2, also die Mindestkraft für einen Force-Klick. In Browsern ohne Unterstützung undefined.Beispiele
Prüfen, ob Force Touch unterstützt wird
const supportsForceTouch = typeof MouseEvent !== 'undefined' &&
'WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN' in MouseEvent;
console.log('Force Touch verfügbar:', supportsForceTouch);
console.log('Schwelle Force-Klick:', MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN);Druckstärke als Fortschrittsbalken anzeigen
const button = document.querySelector('#preview');
const bar = document.querySelector('#force-bar');
const MIN = MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN ?? 1;
const MAX = MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN ?? 2;
button.addEventListener('webkitmouseforcechanged', (event) => {
// Anteil zwischen normalem Klick und Force-Klick (0 bis 1)
const ratio = Math.min(Math.max((event.webkitForce - MIN) / (MAX - MIN), 0), 1);
bar.value = ratio;
if (event.webkitForce >= MAX) {
console.log('Force-Klick erreicht:', event.webkitForce.toFixed(2));
}
});Force-Klick mit Fallback für andere Browser
const link = document.querySelector('#details-link');
const openQuickLook = () => console.log('Schnellvorschau geöffnet');
if ('WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN' in MouseEvent) {
// Standardvorschau von Safari verhindern
link.addEventListener('webkitmouseforcewillbegin', (e) => e.preventDefault());
link.addEventListener('webkitmouseforcedown', openQuickLook);
} else {
// Fallback: langes Drücken per Pointer Events
let timer;
link.addEventListener('pointerdown', () => { timer = setTimeout(openQuickLook, 500); });
link.addEventListener('pointerup', () => clearTimeout(timer));
link.addEventListener('pointerleave', () => clearTimeout(timer));
}// Wichtig · Fallstricke
- Nicht standardisiert: Die Konstante gehört zu keiner Spezifikation. Sie gibt es nur in Safari auf macOS, und nur Geräte mit Force-Touch-Trackpad erzeugen passende Werte. Chrome, Firefox und Edge kennen sie nicht. In Produktivcode sollte man sich nicht darauf verlassen.
- Statisch, nicht pro Event: Man liest sie über
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWNaus. Über ein Event-Objekt (event.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN) ist sie in der Regel nicht erreichbar. Die aktuelle Kraft steht inevent.webkitForce. - Nur lesbar: Wer der Konstante einen Wert zuweist, ändert nichts. Im strikten Modus kann die Zuweisung einen
TypeErrorauslösen. - Standard-Alternative: Pointer Events bieten mit
PointerEvent.pressureeinen browserübergreifenden Druckwert zwischen0und1. Diese API ist zu bevorzugen. - Barrierefreiheit: Force-Klick-Aktionen immer zusätzlich über normale Bedienelemente anbieten, denn viele Nutzer haben kein druckempfindliches Eingabegerät.