JavaScript MouseEvent WEBKIT_FORCE_AT_MOUSE_DOWN Property

What You’ll Learn

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN is a static numeric constant: the minimum force for a normal click on supporting WebKit browsers. Learn how to read it safely, how it differs from the force-click threshold, how it pairs with webkitForce, and five try-it labs.

Introduction

WebKit’s Force Touch helpers expose two static cutoffs on MouseEvent. The lighter one—WEBKIT_FORCE_AT_MOUSE_DOWN—is the minimum force treated as a normal click. The heavier constant is for a force click.

Because this value is static, you always write:

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN

Understanding the Static Property

MDN: a proprietary, WebKit-specific, static numeric property whose value is the minimum force necessary for a normal 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_FORCE_MOUSE_DOWN.

📝 Syntax

const threshold = MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN;

Value

A number representing the normal-click force 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_MOUSE_DOWN;

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

⚖️ Related WebKit Force Helpers

Typical check on Safari with Force Touch: if event.webkitForce >= MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN, the press meets the normal-click force band (after confirming the APIs exist). A still-higher force may cross the force-click constant.

Examples Gallery

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

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

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

false

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

not supported

const hasForce =
  "WEBKIT_FORCE_AT_MOUSE_DOWN" in MouseEvent &&
  "WEBKIT_FORCE_AT_FORCE_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_MOUSE_DOWN" in MouseEvent);
console.log("on instance:", event.WEBKIT_FORCE_AT_MOUSE_DOWN);
console.log("hasOwn on instance:", Object.prototype.hasOwnProperty.call(
  event,
  "WEBKIT_FORCE_AT_MOUSE_DOWN"
));

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

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

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

document.addEventListener("mousedown", (e) => {
  if (meetsNormalClickForce(e)) {
    console.log("meets normal-click force");
  }
});

false

🚀 Common Use Cases

• Learning WebKit Force Touch APIs while reading Safari-only code.
• Feature-detecting normal-click force thresholds in experimental Safari demos.
• Comparing event.webkitForce against the lighter static cutoff.
• Contrasting normal vs force-click bands with WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN.
• 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_FORCE_MOUSE_DOWN, altKey, MouseEvent(), addEventListener(), Window, JavaScript hub.

💡 Best Practices