JavaScript Element gesturestart Event

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

Definition

In JavaScript, gesturestart fires when multiple fingers contact the touch surface, starting a new gesture (MDN). It is a proprietary WebKit GestureEvent.

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

Syntax

Listen for gesturestart. Start with this line.

JavaScript
element.addEventListener("gesturestart", (event) => { … })
CallWhat it does
element.addEventListener("gesturestart", (event) => { … })Primary signature.

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

Library declarations
JavaScript
element.addEventListener("gesturestart", (event) => { … })

Parameters

ParameterDescription
Event nameRequired. "gesturestart"
Handler propOptional. ongesturestart
Portable pathRequired. Touch / Pointer Events

Return Value

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

JavaScript Examples

Example 1 — Listen for gesturestart

WebKit-only — logs baseline scale and rotation when a gesture begins.

JavaScript
const stage = document.querySelector("#stage");

stage.addEventListener("gesturestart", (event) => {
  console.log("scale", event.scale);       // ~1.0
  console.log("rotation", event.rotation); // ~0.0
});
Try It Yourself

How It Works

  1. Attach the listener. Use the event name "gesturestart".
  2. Need two+ fingers. Single-finger taps will not fire it (MDN).
  3. Read baselines. Start values are typically scale 1, rotation 0.
  4. WebKit only. Expect silence in Chrome/Firefox/Edge.

Example 2 — Feature Detect Safely

Never assume gesture events exist — gate Safari-only code.

JavaScript
const hasGesture =
  typeof GestureEvent !== "undefined" ||
  "ongesturestart" in window;

console.log(hasGesture);

if (hasGesture) {
  console.log("WebKit gesture events available");
} else {
  console.log("Use Touch/Pointer Events instead");
}
Try It Yourself

How It Works

  1. Check GestureEvent. Present in supporting WebKit builds.
  2. Or check ongesturestart. Another common capability probe.
  3. Branch. Optional WebKit path vs portable Touch/Pointer path.
  4. Do not polyfill. Emulate with touch geometry instead.

Example 3 — Portable Pinch Start

Standard approach: begin when a second touch lands.

JavaScript
const stage = document.querySelector("#stage");

stage.addEventListener("touchstart", (event) => {
  if (event.touches.length >= 2) {
    console.log("pinch start (portable)");
  }
});
Try It Yourself

How It Works

  1. Use Touch Events. Works across many mobile browsers.
  2. Count touches. touches.length >= 2 means a pinch can begin.
  3. Then track move/end. Compute distance/angle yourself on touchmove.
  4. Optional: also listen for gesturestart on Safari if you want WebKit extras.
Compatibility

Browser Support

gesturestart is Non-standard (MDN) — a proprietary WebKit event, not part of any specification. Feature-detect and prefer Touch/Pointer Events for portable apps.

✓ Non-standard · WebKit

Element gesturestart

WebKit GestureEvent when multi-touch begins — Safari/iOS focused.

WebKit Not cross-browser
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
gesturestart Non-standard

Bottom line: Optional Safari enhancement only. Build pinch/zoom with Touch Events or Pointer Events first.

Frequently Asked Questions

A proprietary WebKit event fired when multiple fingers contact the touch surface, starting a new gesture. During the gesture, gesturechange may fire; when it ends, gestureend fires (MDN).
MDN marks Element gesturestart as Non-standard only — not Deprecated and not Experimental. Still avoid it as the primary API in cross-browser apps.
A GestureEvent (WebKit). It inherits from Event and exposes scale and rotation. At gesturestart, scale is typically 1.0 and rotation is typically 0.0.
It is WebKit-specific. Expect Safari / iOS WebKit. Chrome, Firefox, and Edge generally do not implement this event.
For portable pinch/zoom, prefer Touch Events or Pointer Events and start tracking when a second finger lands (for example touchstart with touches.length === 2). Feature-detect GestureEvent only as an optional Safari enhancement.
No. MDN: it fires when multiple fingers contact the surface. Single-finger taps use touch/pointer events instead.

Next: gotpointercapture

Learn when an element receives pointer capture.

gotpointercapture tutorial →

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 gestureend Event JavaScript Element gotpointercapture Event