JavaScript MouseEvent webkitForce Property

What You’ll Learn

MouseEvent.webkitForce is a non-standard read-only number: how hard the user is pressing on a Force Touch trackpad or touchscreen. Learn feature detection, threshold compares, Force Touch events, and safer Pointer Events alternatives.

Introduction

On Apple Force Touch hardware, a light press and a deep “force click” are different. WebKit exposes the live pressure as webkitForce on mouse events so pages can react to how hard the user presses—mostly useful for Safari experiments.

element.addEventListener("mousedown", (event) => {
  console.log(event.webkitForce); // number on supporting WebKit; often undefined elsewhere
});

Understanding the Property

MDN: MouseEvent.webkitForce is a proprietary, WebKit-specific numeric property whose value represents the amount of pressure applied on the touchpad or touchscreen. It is not part of any specification.

• Instance — read event.webkitForce in a handler.
• Number — pressure intensity when the engine supports Force Touch.
• Non-standard — WebKit proprietary; missing in most other browsers.
• Pair with statics — compare to WEBKIT_FORCE_AT_MOUSE_DOWN and WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN.

📝 Syntax

const force = mouseEvent.webkitForce;

Value

A number representing pressure when supported. Elsewhere the property is typically undefined. Always feature-detect before comparing.

⚖️ Force Touch Family

Mental model: if event.webkitForce >= MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN, treat it as a force click on supporting hardware.

Examples Gallery

Examples follow MDN MouseEvent.webkitForce and the Force Touch events overview. On non-WebKit browsers, expect undefined—that is normal.

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

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

false

document.addEventListener("mousedown", (e) => {
  console.log(
    typeof e.webkitForce === "number"
      ? e.webkitForce
      : "webkitForce not available"
  );
});

webkitForce not available

function classifyForce(event) {
  if (
    typeof event.webkitForce !== "number" ||
    !("WEBKIT_FORCE_AT_MOUSE_DOWN" in MouseEvent) ||
    !("WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN" in MouseEvent)
  ) {
    return "unsupported";
  }

  const force = event.webkitForce;
  if (force >= MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN) {
    return "force-click";
  }
  if (force >= MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN) {
    return "normal-click";
  }
  return "light";
}

document.addEventListener("mousedown", (e) => {
  console.log(classifyForce(e));
});

unsupported

document.addEventListener("webkitmouseforcechanged", (e) => {
  if (typeof e.webkitForce === "number") {
    console.log("pressure:", e.webkitForce);
  }
});

// On non-WebKit browsers this listener never runs — that is expected.

(no webkitmouseforcechanged events)

element.addEventListener("pointerdown", (e) => {
  // 0–1 when the device reports pressure; often 0.5 for a normal mouse click
  console.log(e.pressure);
});

element.addEventListener("pointermove", (e) => {
  if (e.pressure > 0) {
    console.log("pressure:", e.pressure);
  }
});

0.5

🚀 Common Use Cases

• Safari / WebKit Force Touch experiments and demos.
• Detecting force clicks vs normal clicks with the static thresholds.
• Logging pressure while learning proprietary Force Touch events.
• Teaching why non-standard APIs need feature detection.
• Migrating pressure UX toward PointerEvent.pressure.

🔧 How It Works

📝 Notes

• MDN: Non-standard; not part of any specification.
• Not labeled Deprecated or Experimental on the MDN webkitForce page—still avoid production reliance.
• Needs Force Touch-capable hardware and a supporting WebKit build.
• Related: WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN, WEBKIT_FORCE_AT_MOUSE_DOWN, shiftKey, MouseEvent(), JavaScript hub.

💡 Best Practices