JavaScript Element webkitmouseforcewillbegin Event

What You’ll Learn

The webkitmouseforcewillbegin event fires before the initial mousedown in Safari for macOS. Learn why preventDefault() matters, how it fits the Force Touch family, onwebkitmouseforcewillbegin, portable alternatives, and five try-it labs.

Introduction

On Safari for macOS with Force Touch, the earliest Force Touch-related signal is often webkitmouseforcewillbegin—it fires before mousedown. That early timing lets your page opt out of macOS default Force Touch behaviors (lookup, peek, and similar system actions) if the press becomes a force click.

MDN: call preventDefault() on this event to tell the system not to engage those defaults. Then handle force yourself with webkitmouseforcedown, webkitmouseforcechanged, and webkitmouseforceup.

Understanding webkitmouseforcewillbegin

An instance event that answers: “A Force Touch-capable press is about to start—do you want to keep system Force Touch defaults?”

• Timing — before the initial mousedown (Safari macOS).
• Main job — preventDefault() to suppress default Force Touch actions.
• MouseEvent — includes non-standard webkitForce.
• Non-standard — Safari / WebKit proprietary; not Baseline.

📝 Syntax

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

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

onwebkitmouseforcewillbegin = (event) => { };

Event type

A MouseEvent (inherits from UIEvent / Event).

Handy notes

⚖️ Force Touch event family

Examples Gallery

Examples follow MDN Element: webkitmouseforcewillbegin 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("webkitmouseforcewillbegin", () => {
  out.textContent = "webkitmouseforcewillbegin (before mousedown)";
});

pad.addEventListener("mousedown", () => {
  out.textContent += " → mousedown";
});

webkitmouseforcewillbegin (before mousedown) → mousedown

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

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

onwebkitmouseforcewillbegin fired

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

out.textContent = supported
  ? "Force Touch event properties look available (likely Safari)."
  : "No webkitmouseforcewillbegin here — use pointerdown instead.";

if (supported) {
  document.getElementById("pad").addEventListener(
    "webkitmouseforcewillbegin",
    () => {
      out.textContent = "willbegin detected";
    }
  );
}

No webkitmouseforcewillbegin here — use pointerdown instead.

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

pad.addEventListener("webkitmouseforcewillbegin", (event) => {
  event.preventDefault(); // no system Force Touch defaults
  out.textContent = "preventDefault() on willbegin — custom Force Touch UI only";
});

pad.addEventListener("webkitmouseforcedown", () => {
  out.textContent = "Custom force-click (system defaults suppressed)";
});

preventDefault() on willbegin — custom Force Touch UI only

const pad = document.getElementById("pad");
const out = document.getElementById("out");
const steps = [];

function log(step) {
  steps.push(step);
  out.textContent = steps.join(" → ");
}

const forceOk = "onwebkitmouseforcewillbegin" in window;

if (forceOk) {
  pad.addEventListener("webkitmouseforcewillbegin", (e) => {
    e.preventDefault();
    log("willbegin");
  });
  pad.addEventListener("mousedown", () => log("mousedown"));
  pad.addEventListener("webkitmouseforcedown", () => log("forcedown"));
} else {
  pad.addEventListener("pointerdown", () => {
    log("pointerdown (fallback)");
  });
}

pointerdown (fallback)

🚀 Common Use Cases

• Disabling macOS system Force Touch peek/lookup on custom interactive widgets.
• Owning force-click UI entirely in your web app (after preventDefault).
• Teaching the Force Touch timeline that starts before mousedown.
• Preparing state early before pressure stream / force-click events arrive.
• Migrating legacy Safari Force Touch demos with correct default suppression.

🔧 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 for macOS Force Touch proprietary—not for sole use in cross-browser products.
• Main purpose: preventDefault() before mousedown.
• Related learning: webkitmouseforceup, webkitmouseforcedown, pointerdown, addEventListener(), JavaScript hub.

💡 Best Practices