JavaScript Element webkitmouseforcedown Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word WEBKITMOUSEFORCEDOWN

Definition

In JavaScript, the webkitmouseforcedown event is a proprietary WebKit / Safari Force Touch signal: after mousedown, when pressure is high enough for a force click, Safari sends webkitmouseforcedown (MDN). It is a MouseEvent; read pressure with event.webkitForce.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for webkitmouseforcedown. Start with this line.

JavaScript
el.addEventListener("webkitmouseforcedown", fn)
CallWhat it does
el.addEventListener("webkitmouseforcedown", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("webkitmouseforcedown", …) — no import required.

Library declarations
JavaScript
el.addEventListener("webkitmouseforcedown", fn)

Parameters

ParameterDescription
Event targetRequired. Element receiving the force click
Prior mousedownRequired. MDN: force down comes after mousedown
Force Touch + SafariRequired. Otherwise the event never fires

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Listen for Force Click

Log when Safari reports a force-click enter.

JavaScript
const pad = document.getElementById("pad");
const out = document.getElementById("out");

pad.addEventListener("webkitmouseforcedown", () => {
  out.textContent = "webkitmouseforcedown fired";
});
Try It Yourself

How It Works

  1. Pick the target. The element that should react to a force click.
  2. Register the listener. The event name is the WebKit force-down string.
  3. Remember timing. It comes after a normal mousedown, when pressure is deep enough.
  4. Simulate in the lab. Without Force Touch hardware, use the simulate button.

Example 2 — Read webkitForce

Print pressure when force click is entered.

JavaScript
const pad = document.getElementById("pad");
const out = document.getElementById("out");

pad.addEventListener("webkitmouseforcedown", (event) => {
  out.textContent =
    "force click · webkitForce=" + event.webkitForce.toFixed(2);
});
Try It Yourself

How It Works

  1. Wait for force down. The handler runs at force-click enter.
  2. Read pressure. event.webkitForce is the non-standard pressure number.
  3. Show feedback. Confirm the force-click action with a clear message.
  4. Clear later. Listen for webkitmouseforceup if you need an exit path.

Example 3 — Feature Detect + Fallback

Check for the handler property; suggest a portable long-press / Pointer Events path.

JavaScript
const out = document.getElementById("out");
const pad = document.getElementById("pad");
const hasForce = "onwebkitmouseforcedown" in window;

out.textContent = hasForce
  ? "Force Touch force-click available"
  : "No Force Touch — use long-press / PointerEvent.pressure";

if (hasForce) {
  pad.addEventListener("webkitmouseforcedown", () => {
    out.textContent = "force click received";
  });
}
Try It Yourself

How It Works

  1. Feature-detect. Looking for onwebkitmouseforcedown is a common Safari check.
  2. Branch the UX. Only attach the Force Touch listener when support exists.
  3. Plan a fallback. Long-press or Pointer Events pressure for other browsers.
  4. Do not require it. Most users will take the fallback path.
Compatibility

Browser Support

webkitmouseforcedown is Non-standard on MDN — proprietary Safari / WebKit Force Touch. Not Baseline. Not part of any web specification. Prefer portable long-press or Pointer Events for cross-browser apps.

✓ Non-standard

Element webkitmouseforcedown

Safari Force Touch force-click enter only. Not available in Chrome, Firefox, or Edge as a standard event.

Safari WebKit only
Google Chrome Not supported (use fallback)
Unavailable
Mozilla Firefox Not supported (use fallback)
Unavailable
Apple Safari Force Touch hardware / WebKit
Supported
Microsoft Edge Not supported (use fallback)
Unavailable
Opera Not supported
Unavailable
Internet Explorer Not supported
Unavailable
webkitmouseforcedown Limited

Bottom line: Optional Safari enhancement. Ship a long-press / Pointer Events path for everyone else.

Frequently Asked Questions

After a mousedown has fired, when enough pressure is applied for a “force click,” Safari begins sending webkitmouseforcedown to the element (MDN). It is the Force Touch “force click started” signal.
MDN marks it Non-standard only — not Deprecated and not Experimental. It is not part of any web specification. Prefer portable APIs for production.
A MouseEvent (inherits from UIEvent / Event). Read pressure with the non-standard MouseEvent.webkitForce property.
webkitmouseforcechanged fires repeatedly as pressure changes. webkitmouseforcedown fires when pressure reaches force-click level (after mousedown). webkitmouseforceup fires when pressure drops out of that range.
Prefer Pointer Events (for example long-press timers or PointerEvent.pressure thresholds) with mouse/touch fallbacks. Treat Force Touch as an optional Safari enhancement only.
Use element.addEventListener("webkitmouseforcedown", handler), or set onwebkitmouseforcedown where supported. Always feature-detect first.

Next: webkitmouseforceup

Handle the force-click exit signal in Safari Force Touch.

webkitmouseforceup →

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)

11 people found this page helpful

JavaScript Element webkitmouseforcechanged Event JavaScript Element webkitmouseforceup Event