JavaScript Element webkitmouseforceup Event

What You’ll Learn

The webkitmouseforceup event fires when pressure drops enough to end a force click after webkitmouseforcedown. Learn MouseEvent.webkitForce, onwebkitmouseforceup, cleanup patterns, portable alternatives, and five try-it labs.

Introduction

When a Force Touch force click ends—pressure reduced enough after webkitmouseforcedown—Safari fires webkitmouseforceup. Use it to leave “force-click mode,” close a peek preview, or stop a temporary action you started on forcedown.

Continuous pressure updates still come from webkitmouseforcechanged. For portable apps, clean up on pointerup / pointercancel (or when a long-press timer is cleared), and treat Force Touch as an optional Safari path.

Understanding webkitmouseforceup

An instance event for Safari Force Touch force-click end. MDN: fired some time after webkitmouseforcedown, when pressure has been reduced sufficiently to end the force click.

• Trigger — left the force-click pressure range (after forcedown).
• MouseEvent — use non-standard webkitForce for pressure.
• Pair with — webkitmouseforcedown for enter/exit UI.
• Non-standard — Safari / WebKit proprietary; not Baseline.

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("webkitmouseforceup", (event) => { });

onwebkitmouseforceup = (event) => { };

Event type

A MouseEvent (inherits from UIEvent / Event).

Handy Force Touch properties & constants

⚖️ Force Touch event family

Examples Gallery

Examples follow MDN Element: webkitmouseforceup event and Apple’s Force Touch docs. Labs feature-detect so they still teach useful lessons without Force Touch hardware.

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

pad.addEventListener("webkitmouseforceup", () => {
  out.textContent = "Force click up";
});

Force click up

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

pad.onwebkitmouseforceup = () => {
  out.textContent = "onwebkitmouseforceup fired";
};

onwebkitmouseforceup fired

const out = document.getElementById("out");
const supported =
  "onwebkitmouseforceup" in window ||
  "onwebkitmouseforceup" in document.documentElement;

out.textContent = supported
  ? "Force Touch event properties look available (likely Safari)."
  : "No webkitmouseforceup here — clean up on pointerup instead.";

if (supported) {
  document.getElementById("pad").addEventListener(
    "webkitmouseforceup",
    () => {
      out.textContent = "Force click ended";
    }
  );
}

No webkitmouseforceup here — clean up on pointerup instead.

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

pad.addEventListener("webkitmouseforcedown", () => {
  pad.classList.add("force-active");
  out.textContent = "force mode ON";
});

pad.addEventListener("webkitmouseforceup", (event) => {
  pad.classList.remove("force-active");
  out.textContent =
    "force mode OFF · webkitForce=" + event.webkitForce.toFixed(3);
});

force mode OFF · webkitForce=1.050

const pad = document.getElementById("pad");
const out = document.getElementById("out");
let timer = null;

function log(msg) {
  out.textContent = msg;
}

const forceOk = "onwebkitmouseforceup" in window;

if (forceOk) {
  pad.addEventListener("webkitmouseforcedown", () => log("forcedown"));
  pad.addEventListener("webkitmouseforceup", () => log("forceup"));
} else {
  pad.addEventListener("pointerdown", () => {
    log("holding…");
    timer = setTimeout(() => log("long-press ON (fallback)"), 550);
  });
  function endHold() {
    clearTimeout(timer);
    log("released (fallback forceup)");
  }
  pad.addEventListener("pointerup", endHold);
  pad.addEventListener("pointercancel", endHold);
}

released (fallback forceup)

🚀 Common Use Cases

• Closing Safari-only force-click peek / preview UIs.
• Leaving a temporary “force mode” started on forcedown.
• Teaching the Force Touch family enter/exit pairing.
• Stopping media speed-ups or secondary actions when force click ends.
• Migrating legacy Force Touch demos to pointerup cleanup.

🔧 How It Works

📝 Notes

• MDN: Non-standard — status banner required before What You’ll Learn.
• Not Deprecated or Experimental on the MDN Element page for this event.
• Safari / WebKit Force Touch proprietary—not for sole use in cross-browser products.
• Always pair with forcedown (or portable enter) and a release/cancel exit.
• Related learning: webkitmouseforcedown, webkitmouseforcechanged, pointerdown, addEventListener(), JavaScript hub.

💡 Best Practices