JavaScript MouseEvent WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN Property

What You’ll Learn

MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN is a static numeric constant: the minimum force for a force click on supporting WebKit browsers. Learn how to read it safely, why it is not on event instances, how it pairs with webkitForce, and five try-it labs.

Introduction

Some Apple trackpads support Force Touch: pressing harder can mean a different action than a normal click. WebKit exposed helpers on MouseEvent so pages could read press force and compare it to fixed thresholds.

WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN is one of those thresholds—the minimum force for a force click. Because it is static, you always write:

MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN

Understanding the Static Property

MDN: a proprietary, WebKit-specific, static numeric property whose value is the minimum force necessary for a force click.

• Static — read from MouseEvent, not from event.
• Number — a force threshold (when the property exists).
• Non-standard — not in any official web specification.
• Force Touch family — related to webkitForce and WEBKIT_FORCE_AT_MOUSE_DOWN.

📝 Syntax

const threshold = MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;

Value

A number representing the force-click threshold on supporting engines. If the property is missing, feature detection should treat it as unavailable.

Correct vs incorrect access

// Correct — static on MouseEvent
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;

// Incorrect — not an instance property
someMouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN; // usually undefined

⚖️ Related WebKit Force Helpers

Typical check on Safari with Force Touch: if event.webkitForce >= MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN, treat it as a force click (after confirming both APIs exist).

Examples Gallery

Examples follow MDN MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN. On non-WebKit browsers, expect the property to be missing—that is normal.

const supported =
  typeof MouseEvent !== "undefined" &&
  "WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN" in MouseEvent;

console.log(supported); // true on some Safari/WebKit builds, else false

false

if ("WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN" in MouseEvent) {
  console.log(MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN);
  console.log(typeof MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN);
} else {
  console.log("not supported");
}

not supported

const hasForce =
  "WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN" in MouseEvent &&
  "WEBKIT_FORCE_AT_MOUSE_DOWN" in MouseEvent;

if (hasForce) {
  const normal = MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN;
  const force = MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;
  console.log(normal, force);
  console.log(force > normal); // typically true
} else {
  console.log("thresholds unavailable");
}

thresholds unavailable

const event = new MouseEvent("mousedown");

console.log("on constructor:", "WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN" in MouseEvent);
console.log("on instance:", event.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN);
console.log("hasOwn on instance:", Object.prototype.hasOwnProperty.call(
  event,
  "WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN"
));

on constructor: false
on instance: undefined
hasOwn on instance: false

function isForceClick(event) {
  if (
    !("WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN" in MouseEvent) ||
    typeof event.webkitForce !== "number"
  ) {
    return false;
  }
  return event.webkitForce >= MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;
}

// Demo with a synthetic event (webkitForce usually absent):
const fake = new MouseEvent("mousedown");
console.log(isForceClick(fake)); // false on most browsers

document.addEventListener("mousedown", (e) => {
  if (isForceClick(e)) {
    console.log("force click");
  }
});

false

🚀 Common Use Cases

• Learning WebKit Force Touch APIs while reading Safari-only code.
• Feature-detecting force-click thresholds in experimental Safari demos.
• Comparing event.webkitForce against documented static cutoffs.
• Documenting why a codebase should not depend on this for Chrome/Firefox users.
• Teaching the difference between static constants and instance event fields.

🔧 How It Works

📝 Notes

• MDN: Non-standard; not part of any specification (Apple docs historically).
• Not Deprecated or Experimental on that MDN page—but still unsuitable as a cross-browser dependency.
• Always feature-detect; most browsers omit these constants.
• Related: WEBKIT_FORCE_AT_MOUSE_DOWN, MouseEvent(), addEventListener(), dispatchEvent(), Window, JavaScript hub.

💡 Best Practices