Signatur
Beschreibung
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN ist eine statische, schreibgeschützte Zahl am Konstruktor MouseEvent. Sie gibt an, wie stark ein Nutzer auf ein Force-Touch-Trackpad drücken muss, damit ein normaler Klick (mousedown) ausgelöst wird. In Safari hat sie den Wert 1.
Die Konstante ist nur zusammen mit der Instanz-Eigenschaft event.webkitForce sinnvoll: Deren aktuellen Druckwert vergleicht man mit WEBKIT_FORCE_AT_MOUSE_DOWN (normaler Klick) und WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN (Force-Klick, Wert 2). Werte zwischen beiden Schwellen zeigen an, dass der Nutzer schon geklickt hat, aber noch keinen Force-Klick auslöst.
Man greift auf sie in Oberflächen zu, die abgestuft auf Druck reagieren sollen, etwa bei Vorschau-Einblendungen, Zeichenwerkzeugen mit Strichstärke nach Druck oder beim „Hineindrücken“ in Elemente. Da ausschließlich Safari unter macOS diese API unterstützt, sollte man sie nur als progressive Verbesserung einsetzen und für andere Browser eine Alternative anbieten, bevorzugt PointerEvent.pressure.
Weil die Eigenschaft statisch ist, liest man sie immer über den Konstruktor (MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN) und nicht über ein Ereignisobjekt. Parameter gibt es nicht.
Rückgabewert
1). In Browsern ohne Unterstützung ist die Eigenschaft nicht vorhanden, der Zugriff liefert also undefined.Beispiele
Unterstützung erkennen und Schwellenwerte auslesen
const supportsForceTouch = 'WEBKIT_FORCE_AT_MOUSE_DOWN' in MouseEvent;
if (supportsForceTouch) {
console.log('Klick-Schwelle:', MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN);
console.log('Force-Klick-Schwelle:', MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN);
} else {
console.log('Force Touch wird nicht unterstützt');
}Druckstärke auf 0–1 normieren (Vorschau-Karte)
const card = document.querySelector('.preview-card');
card.addEventListener('webkitmouseforcechanged', (event) => {
const min = MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN;
const max = MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;
// 0 = normaler Klick, 1 = Force-Klick
const progress = Math.min(Math.max((event.webkitForce - min) / (max - min), 0), 1);
card.style.transform = `scale(${1 + progress * 0.1})`;
card.classList.toggle('is-peeking', progress > 0.5);
});Browserübergreifend mit Fallback auf PointerEvent.pressure
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const getPressure = (event) => {
if ('webkitForce' in event && 'WEBKIT_FORCE_AT_MOUSE_DOWN' in MouseEvent) {
// WebKit: webkitForce auf 0–1 abbilden
return Math.min(event.webkitForce / MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN, 1);
}
// Standard: pressure liegt bereits im Bereich 0–1
return event.pressure ?? 0.5;
};
canvas.addEventListener('pointermove', (event) => {
if (event.buttons !== 1) return;
const size = 1 + getPressure(event) * 10;
ctx.fillRect(event.offsetX, event.offsetY, size, size);
});// Wichtig · Fallstricke
- Nicht standardisiert: Die Konstante gibt es nur in Safari unter macOS mit Force-Touch-Trackpad (bzw. passender Magic-Trackpad-Hardware). Chrome, Firefox, Edge und Safari unter iOS kennen sie nicht. Im Produktivcode nur nach vorheriger Feature-Erkennung verwenden.
- Statisch:
event.WEBKIT_FORCE_AT_MOUSE_DOWNauf einer Instanz ist nicht der vorgesehene Zugriffsweg. ImmerMouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWNverwenden. - Den Zahlenwert (
1) nicht fest einprogrammieren, sondern die Konstante auslesen. Nur so bleibt die Normierung korrekt, falls WebKit die Skala ändert. - Wer Force-Klicks selbst verarbeitet, sollte in
webkitmouseforcewillbeginpreventDefault()aufrufen. Sonst startet macOS eigene Aktionen wie das Nachschlagen im Wörterbuch. - Die standardisierte Alternative ist
PointerEvent.pressure(Wertebereich 0–1). Sie wird in allen modernen Browsern unterstützt und sollte bei neuen Projekten bevorzugt werden.