JavaScript MouseEvent webkitForce Property

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

Definition

event.webkitForce is a proprietary WebKit number: how much pressure is applied on a Force Touch trackpad or touchscreen (MDN). Compare it to the static WEBKIT_FORCE_AT_* thresholds when those exist.

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

Syntax

Use event.webkitForce. Start with this line.

JavaScript
event.webkitForce
CallWhat it does
event.webkitForcePrimary signature.

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

Library declarations
JavaScript
event.webkitForce

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Number when supported; else often undefined

JavaScript Examples

Example 1 — Feature Detect

Never assume the property exists — check the type first.

JavaScript
const event = new MouseEvent("mousedown");
const supported = typeof event.webkitForce === "number";

console.log(supported);
Try It Yourself

How It Works

  1. Create a MouseEvent. Safe probe without hardware.
  2. typeof === "number". True only when the engine exposes it.
  3. false on most browsers. Expected outside Safari/WebKit Force Touch.
  4. Gate all Force Touch logic behind this check.

Example 2 — Read on mousedown

Log the live force when the user presses.

JavaScript
el.addEventListener("mousedown", (e) => {
  if (typeof e.webkitForce !== "number") {
    console.log("webkitForce unsupported");
    return;
  }
  console.log("force", e.webkitForce);
});
Try It Yourself

How It Works

  1. Listen for mousedown. Press starts the sample.
  2. Guard with typeof. Avoid treating undefined as force.
  3. Log the number when WebKit reports pressure.
  4. Hardware matters — no Force Touch device → no meaningful force.

Example 3 — Compare Normal-Click Threshold

Use the static normal-click floor when it exists.

JavaScript
el.addEventListener("mousedown", (e) => {
  if (typeof e.webkitForce !== "number") return;
  if (!("WEBKIT_FORCE_AT_MOUSE_DOWN" in MouseEvent)) return;

  const ok = e.webkitForce >= MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN;
  console.log("meets normal click force?", ok);
});
Try It Yourself

How It Works

  1. Require a numeric webkitForce.
  2. Require the static constant on MouseEvent.
  3. Compare ≥ threshold for a normal-click force floor.
  4. See also the dedicated WEBKIT_FORCE_AT_MOUSE_DOWN tutorial.

Example 4 — Detect Force Click

Higher threshold = force click on supporting hardware.

JavaScript
el.addEventListener("mousedown", (e) => {
  if (typeof e.webkitForce !== "number") return;
  if (!("WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN" in MouseEvent)) return;

  if (e.webkitForce >= MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN) {
    console.log("force click");
  }
});
Try It Yourself

How It Works

  1. Detect force + constant. Both must exist.
  2. Compare to FORCE threshold. Usually higher than normal.
  3. Log only on hard press that meets the force-click floor.
  4. Light presses stay below and do nothing here.

Example 5 — Safe Fallback Path

Always keep a normal click path when Force Touch is missing.

JavaScript
el.addEventListener("mousedown", (e) => {
  if (typeof e.webkitForce === "number") {
    console.log("Force Touch path", e.webkitForce);
    return;
  }
  console.log("normal mouse path");
});
Try It Yourself

How It Works

  1. Branch on typeof. Force path only when numeric.
  2. Else use normal mouse logic. Works everywhere.
  3. MDN advice: non-standard APIs need a fallback.
  4. For broader pressure, consider Pointer Events pressure.
Compatibility

Browser Support

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

✓ Non-standard

MouseEvent.webkitForce

Proprietary WebKit pressure number. Limited support. Feature-detect and provide a normal-mouse fallback.

Limited 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
webkitForce Limited

Bottom line: Non-standard — study for Safari Force Touch, do not depend on it alone. See the MDN webkitForce reference.

Frequently Asked Questions

It is a proprietary WebKit numeric property on a mouse event that represents how much pressure is being applied on a Force Touch trackpad or touchscreen. On non-WebKit browsers it is usually undefined.
MDN marks it Non-standard — not part of any specification. It is not labeled Deprecated or Experimental on that MDN page, but you should not rely on it in production cross-browser code.
Feature-detect both event.webkitForce and MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN, then check whether webkitForce is greater than or equal to that static threshold.
On supporting WebKit builds it can appear on Force Touch–related mouse events such as mousedown, mouseup, mousemove, and webkitmouseforce* events when the hardware reports pressure.
Prefer Pointer Events with event.pressure (0–1) on pointerdown / pointermove when you need more standard, cross-browser pressure sensing.
Instance. Read event.webkitForce on a live mouse event. The related WEBKIT_FORCE_AT_* values are static constants on the MouseEvent constructor.

Next: WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN

Learn the static threshold used to detect a force click.

Force threshold 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)

9 people found this page helpful

JavaScript MouseEvent shiftKey Property JavaScript MouseEvent WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN Property