JavaScript Element webkitmouseforcewillbegin Event

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

Definition

In JavaScript, the webkitmouseforcewillbegin event is a proprietary WebKit / Safari Force Touch signal: Safari for macOS fires it on an element before the initial mousedown (MDN). Call preventDefault() to tell macOS not to run default Force Touch actions if the press becomes a force click.

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

Syntax

Listen for webkitmouseforcewillbegin. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element that may receive a force click
preventDefault()Optional. Stops macOS default Force Touch actions
Safari + Force Touch (macOS)Required. Otherwise the event never fires

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Listen Before mousedown

Log when Safari reports Force Touch may begin.

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

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

How It Works

  1. Pick the target. The element that may receive a force press.
  2. Register early. This listener runs before mousedown.
  3. Remember the role. It is a prep hook, not the force-click action itself.
  4. Simulate in the lab. Without Force Touch hardware, use the simulate button.

Example 2 — preventDefault()

Block macOS default Force Touch actions when you handle force clicks yourself.

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

pad.addEventListener("webkitmouseforcewillbegin", (event) => {
  event.preventDefault();
  out.textContent = "system Force Touch defaults blocked";
});
Try It Yourself

How It Works

  1. Catch willbegin. This is the Safari hook before mousedown.
  2. Call preventDefault. MDN: tells macOS not to run default Force Touch actions.
  3. Keep your own handlers. Still listen for forcedown / forceup for your UX.
  4. Simulate carefully. The lab shows the call; real blocking needs Safari macOS.

Example 3 — Feature Detect

Check for the handler property before attaching the Safari-only listener.

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

out.textContent = hasForce
  ? "Force Touch willbegin available"
  : "No Force Touch willbegin — nothing to prevent";

if (hasForce) {
  pad.addEventListener("webkitmouseforcewillbegin", (event) => {
    event.preventDefault();
    out.textContent = "willbegin handled";
  });
}
Try It Yourself

How It Works

  1. Feature-detect. Looking for onwebkitmouseforcewillbegin is a common Safari check.
  2. Branch the UX. Only attach when support exists.
  3. Skip elsewhere. Other browsers have no system Force Touch defaults to suppress.
  4. Stay optional. Never require this event for core app behavior.
Compatibility

Browser Support

webkitmouseforcewillbegin is Non-standard on MDN — proprietary Safari / WebKit Force Touch (macOS). Not Baseline. Not part of any web specification. Prefer portable Pointer / mouse events for cross-browser apps.

✓ Non-standard

Element webkitmouseforcewillbegin

Safari macOS Force Touch prep hook only. Not available in Chrome, Firefox, or Edge as a standard event.

Safari WebKit only
Google Chrome Not supported
Unavailable
Mozilla Firefox Not supported
Unavailable
Apple Safari macOS Force Touch / WebKit
Supported
Microsoft Edge Not supported
Unavailable
Opera Not supported
Unavailable
Internet Explorer Not supported
Unavailable
webkitmouseforcewillbegin Limited

Bottom line: Optional Safari enhancement for blocking system Force Touch defaults. Ignore on other browsers.

Frequently Asked Questions

Safari for macOS fires webkitmouseforcewillbegin on an element before the initial mousedown (MDN). Its main job is giving you a chance to call preventDefault() so macOS does not run default Force Touch actions if the press becomes a force click.
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). It can also expose the non-standard MouseEvent.webkitForce property.
MDN: calling preventDefault() on webkitmouseforcewillbegin tells macOS not to engage default Force Touch actions if the user applies enough pressure — useful when your page handles force clicks itself.
It fires before the initial mousedown. Later you may see webkitmouseforcechanged, webkitmouseforcedown, webkitmouseforceup, then mouseup.
Use element.addEventListener("webkitmouseforcewillbegin", handler), or set onwebkitmouseforcewillbegin where supported. Always feature-detect first.

Next: wheel

Handle mouse wheel / trackpad scroll deltas on an element.

wheel →

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 webkitmouseforceup Event JavaScript Element wheel Event