JavaScript Element webkitmouseforceup Event

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

Definition

In JavaScript, the webkitmouseforceup event is a proprietary WebKit / Safari Force Touch signal: sometime after webkitmouseforcedown, when pressure drops enough to end the force click, Safari sends webkitmouseforceup (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 webkitmouseforceup. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element that received the force click
Prior webkitmouseforcedownRequired. MDN: force up comes after force down
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 End

Log when Safari reports a force-click exit.

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

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

How It Works

  1. Pick the target. Same element that listened for force down.
  2. Register the listener. The event name is the WebKit force-up string.
  3. Remember timing. It comes after webkitmouseforcedown, when pressure eases.
  4. Simulate in the lab. Without Force Touch hardware, use the simulate button.

Example 2 — Clear Force UI on Exit

Enter on forcedown, clear status on forceup.

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

pad.addEventListener("webkitmouseforcedown", () => {
  out.textContent = "force active";
});

pad.addEventListener("webkitmouseforceup", () => {
  out.textContent = "force cleared";
});
Try It Yourself

How It Works

  1. Set state on down. Force down marks the UI as force-active.
  2. Clear on up. Force up is the matching exit signal (MDN).
  3. Avoid sticky UI. Without force up (or a portable release), status can stick.
  4. Simulate both. The lab runs forcedown then forceup in sequence.

Example 3 — Feature Detect + Fallback

Check for the handler property; clear UI on pointerup when Force Touch is missing.

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

out.textContent = hasForce
  ? "Force Touch force-up available"
  : "No Force Touch — clear on pointerup / mouseup";

if (hasForce) {
  pad.addEventListener("webkitmouseforceup", () => {
    out.textContent = "force click ended";
  });
} else {
  pad.addEventListener("pointerup", () => {
    out.textContent = "cleared on pointerup (fallback)";
  });
}
Try It Yourself

How It Works

  1. Feature-detect. Looking for onwebkitmouseforceup is a common Safari check.
  2. Branch the UX. Only attach Force Touch when support exists.
  3. Plan a fallback. Clear the same UI on pointerup / mouseup.
  4. Do not require it. Most users will take the fallback path.
Compatibility

Browser Support

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

✓ Non-standard

Element webkitmouseforceup

Safari Force Touch force-click exit 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
webkitmouseforceup Limited

Bottom line: Optional Safari enhancement. Clear the same UI on pointerup / mouseup for everyone else.

Frequently Asked Questions

Sometime after webkitmouseforcedown, when pressure has been reduced enough to end the force click, Safari fires webkitmouseforceup (MDN). It is the Force Touch “force click ended” 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.
webkitmouseforcedown fires when pressure reaches force-click level. webkitmouseforceup fires later when pressure drops enough to leave that force-click state.
Prefer Pointer Events (clear timers or UI on pointerup/pointercancel) with mouse/touch fallbacks. Treat Force Touch as an optional Safari enhancement only.
Use element.addEventListener("webkitmouseforceup", handler), or set onwebkitmouseforceup where supported. Always feature-detect first.

Next: webkitmouseforcewillbegin

Handle the Force Touch signal that fires before mousedown.

webkitmouseforcewillbegin →

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