JavaScript Element webkitmouseforcechanged Event

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

Definition

In JavaScript, the webkitmouseforcechanged event is a proprietary WebKit / Safari Force Touch event that fires each time pressure changes on a Force Touch trackpad or touchscreen (MDN). It is a MouseEvent; read pressure with event.webkitForce. It first fires after mousedown and stops before mouseup.

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

Syntax

Listen for webkitmouseforcechanged. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element receiving Force Touch pressure
MouseEvent.webkitForceRequired. Current pressure amount (non-standard)
Force Touch hardware + 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 Changes

Log whenever Safari reports a pressure update.

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

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

How It Works

  1. Pick the target. The element that should react to Force Touch pressure.
  2. Register the listener. The event name is the long WebKit string shown above.
  3. Expect a stream. While pressed, Safari may fire this many times as pressure changes.
  4. Simulate in the lab. Without Force Touch hardware, use the simulate button.

Example 2 — Read webkitForce

Print the pressure value and compare it to the force-click threshold when available.

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

pad.addEventListener("webkitmouseforcechanged", (event) => {
  const force = event.webkitForce;
  const forceClick = typeof MouseEvent !== "undefined" &&
    MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;

  out.textContent =
    "webkitForce=" + force.toFixed(2) +
    (forceClick && force >= forceClick ? " · force click" : "");
});
Try It Yourself

How It Works

  1. Read pressure. event.webkitForce is the non-standard pressure number.
  2. Use Apple’s constants. Compare against WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN when it exists.
  3. Label the UI. Show a “force click” hint when the threshold is crossed.
  4. Guard missing constants. Other browsers may not define the MouseEvent.WEBKIT_* fields.

Example 3 — Feature Detect + Fallback Note

Check for the handler property; suggest Pointer Events when Force Touch is missing.

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

out.textContent = hasForce
  ? "Force Touch events available"
  : "No Force Touch — use PointerEvent.pressure";

if (hasForce) {
  pad.addEventListener("webkitmouseforcechanged", (event) => {
    out.textContent = "force=" + event.webkitForce.toFixed(2);
  });
}
Try It Yourself

How It Works

  1. Feature-detect. Looking for onwebkitmouseforcechanged is a common Safari check.
  2. Branch the UX. Only attach the Force Touch listener when support exists.
  3. Plan a fallback. Pointer Events pressure is the portable alternative.
  4. Do not require it. Most browsers and devices will take the fallback path.
Compatibility

Browser Support

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

✓ Non-standard

Element webkitmouseforcechanged

Safari Force Touch pressure stream only. Not available in Chrome, Firefox, or Edge as a standard event.

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

Bottom line: Optional Safari enhancement. Ship PointerEvent.pressure (or ignore pressure) for everyone else.

Frequently Asked Questions

It is a proprietary Safari / WebKit Force Touch event that fires each time pressure changes on a Force Touch trackpad or touchscreen (MDN). It first fires after mousedown and stops before mouseup.
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.
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN is the minimum for a normal click; MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN is the minimum for a force click. Compare event.webkitForce against them.
Prefer Pointer Events (PointerEvent.pressure) where available, with mouse/touch fallbacks. Treat Force Touch events as an optional Safari enhancement only.
Use element.addEventListener("webkitmouseforcechanged", handler), or set onwebkitmouseforcechanged where supported. Always feature-detect first.

Next: webkitmouseforcedown

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

webkitmouseforcedown →

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 transitionstart Event JavaScript Element webkitmouseforcedown Event