JavaScript Element webkitmouseforcedown Event

What You’ll Learn

The webkitmouseforcedown event fires when pressure reaches a force click after mousedown. Learn MouseEvent.webkitForce, onwebkitmouseforcedown, how it pairs with webkitmouseforcechanged / forceup, portable alternatives, and five try-it labs.

Introduction

On Force Touch trackpads, pressing harder can trigger a distinct “force click.” After a normal mousedown, when pressure is high enough, Safari sends webkitmouseforcedown—the start of that force-click interaction.

While pressure is changing you may also see webkitmouseforcechanged. When pressure drops out of the force-click range, Safari sends webkitmouseforceup. For cross-browser apps, prefer Pointer Events or a long-press timer instead of relying on Force Touch alone.

Understanding webkitmouseforcedown

An instance event for Safari Force Touch force-click start. MDN: after mousedown, when sufficient pressure qualifies as a force click, Safari begins sending webkitmouseforcedown.

• Trigger — pressure crossed the force-click threshold (after mousedown).
• MouseEvent — use non-standard webkitForce for pressure.
• Pair with — webkitmouseforceup when force click ends.
• Non-standard — Safari / WebKit proprietary; not Baseline.

📝 Syntax

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

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

onwebkitmouseforcedown = (event) => { };

Event type

A MouseEvent (inherits from UIEvent / Event).

Handy Force Touch properties & constants

⚖️ Force Touch event family

Examples Gallery

Examples follow MDN Element: webkitmouseforcedown 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("webkitmouseforcedown", () => {
  out.textContent = "Force click down";
});

Force click down

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

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

onwebkitmouseforcedown fired

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

out.textContent = supported
  ? "Force Touch event properties look available (likely Safari)."
  : "No webkitmouseforcedown here — use long-press / Pointer pressure.";

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

No webkitmouseforcedown here — use long-press / Pointer pressure.

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

pad.addEventListener("webkitmouseforcedown", (event) => {
  const threshold = MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;
  out.textContent =
    "forcedown · webkitForce=" + event.webkitForce.toFixed(3) +
    " (threshold≈" + threshold + ")";
});

forcedown · webkitForce=2.050 (threshold≈2)

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

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

const forceOk = "onwebkitmouseforcedown" 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 (fallback force-click)"), 550);
  });
  pad.addEventListener("pointerup", () => {
    clearTimeout(timer);
  });
  pad.addEventListener("pointercancel", () => {
    clearTimeout(timer);
  });
}

long-press (fallback force-click)

🚀 Common Use Cases

• Optional Safari force-click previews (peek / open in new window).
• Teaching the Force Touch family alongside standard mouse events.
• Speeding up media or revealing secondary actions on force click.
• Migrating legacy WebKit Force Touch demos to long-press / Pointer Events.
• Pairing with webkitmouseforceup to start and end a force-click mode.

🔧 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.
• Prefer long-press or Pointer Events pressure as the default path.
• Related learning: webkitmouseforcechanged, pointerdown, gesturestart, addEventListener(), JavaScript hub.

💡 Best Practices