JavaScript MouseEvent webkitForceAtMouseDown Property

Beginner
5 min read
Updated: Nov 2026
5 examples
Property
Decorative image with the word WEBKITFORCEATMOUSEDOWN

Definition

A proprietary WebKit static number on MouseEvent: the minimum force needed for a normal click (MDN). Always read MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN — not on an event instance.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.webkitForceAtMouseDown. Start with this line.

JavaScript
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
CallWhat it does
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWNPrimary signature.

Built into the browser. Read event.webkitForceAtMouseDown on a MouseEvent — no import required.

Library declarations
JavaScript
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN

Parameters

ParameterDescription
Instance?Optional. Not an event property — static only

Return Value

Return ValueDescription
*Number (threshold) when supported

JavaScript Examples

Example 1 — Feature Detect

Never assume the constant exists — check first.

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

console.log(supported);
Try It Yourself

How It Works

  1. Confirm MouseEvent exists.
  2. Use in to test for the static name.
  3. Most browsers → false.
  4. Safari/WebKit with Force Touch → may be true.

Example 2 — Read the Threshold

Log the number only when support is present.

JavaScript
if ("WEBKIT_FORCE_AT_MOUSE_DOWN" in MouseEvent) {
  console.log(MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN);
} else {
  console.log("unsupported");
}
Try It Yourself

How It Works

  1. Gate on feature detect.
  2. Read the static from MouseEvent.
  3. Value is a number — the normal-click force floor.
  4. Else print unsupported and skip Force Touch logic.

Example 3 — Static vs Instance

MDN: use the constructor — not event.….

JavaScript
const e = new MouseEvent("mousedown");
console.log("instance", e.WEBKIT_FORCE_AT_MOUSE_DOWN);
console.log(
  "static",
  "WEBKIT_FORCE_AT_MOUSE_DOWN" in MouseEvent
    ? MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
    : "n/a"
);
Try It Yourself

How It Works

  1. Create any MouseEvent.
  2. Read on the instance — usually undefined.
  3. Read on MouseEvent when supported.
  4. Always prefer the static form.

Example 4 — Two Thresholds

Normal-click threshold is typically lower than force-click.

JavaScript
const mouseDown =
  "WEBKIT_FORCE_AT_MOUSE_DOWN" in MouseEvent
    ? MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
    : null;
const forceClick =
  "WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN" in MouseEvent
    ? MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN
    : null;

console.log({ mouseDown, forceClick });
Try It Yourself

How It Works

  1. Detect each static separately.
  2. mouseDown — lighter normal press floor.
  3. forceClick — harder force-click floor.
  4. On WebKit, forceClick is typically larger.

Example 5 — Compare webkitForce

Use the threshold only when both APIs exist.

JavaScript
el.addEventListener("mousedown", (e) => {
  if (!("WEBKIT_FORCE_AT_MOUSE_DOWN" in MouseEvent)) {
    console.log("no Force Touch API");
    return;
  }
  const t = MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN;
  console.log(e.webkitForce >= t ? "normal force met" : "below");
});
Try It Yourself

How It Works

  1. Exit early if the static is missing.
  2. Read the threshold once.
  3. Compare event.webkitForce to that number.
  4. Fallback when unsupported.
Compatibility

Browser Support

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN is marked Non-standard on MDN — not part of any specification. WebKit/Safari Force Touch only.

✓ Non-standard

WEBKIT_FORCE_AT_MOUSE_DOWN

Static WebKit threshold for a normal click. Feature-detect; provide a fallback. Prefer broader pressure APIs when you need cross-browser support.

— WebKit only
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
Normal threshold Limited

Bottom line: Study it for Safari Force Touch demos — do not require it for core UX. See the MDN reference.

Frequently Asked Questions

A proprietary WebKit static numeric property on MouseEvent. Its value is the minimum force needed for a normal click. Always read it as MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN, not on an event instance.
MDN marks it Non-standard — not part of any web specification. It is not labeled Deprecated or Experimental on that MDN page, but non-standard APIs should not be relied on in production cross-browser code.
WEBKIT_FORCE_AT_MOUSE_DOWN is the lighter threshold for a normal click. WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN is the higher threshold for a force click. When both exist, the force-click value is typically greater.
Because it is a static property of the MouseEvent interface. Instance events do not carry this constant; reading event.WEBKIT_FORCE_AT_MOUSE_DOWN is typically undefined.
MouseEvent.webkitForce reports the current force on a mouse event. Compare that value to WEBKIT_FORCE_AT_MOUSE_DOWN to see if the press meets a normal-click force threshold on supporting Safari/WebKit builds.
Only behind feature detection for Safari/WebKit Force Touch experiments. Prefer broader Pointer Events pressure APIs where they fit your product.

Next: x

Learn the MouseEvent x property (alias for clientX).

x tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

JavaScript MouseEvent WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN Property JavaScript MouseEvent x Property