JavaScript Element gesturechange Event

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

Definition

In JavaScript, the gesturechange event fires when digits move during a touch gesture (MDN). It is a proprietary WebKit event. The event object is a GestureEvent with scale and rotation.

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

Syntax

Listen for gesturechange. Start with this line.

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

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

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

Parameters

ParameterDescription
WebKit / SafariRequired. Only engine that implements it
Multi-touchRequired. Needs two digits for pinch/rotate
GestureEventRequired. Carries scale and rotation

Return Value

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

JavaScript Examples

Example 1 — Feature Detect

Check WebKit gesture support before attaching listeners.

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

console.log("gesturechange supported:", hasGesture);

if (!hasGesture) {
  console.log("Use touchmove / pointermove instead");
}
Try It Yourself

How It Works

  1. Probe the globals. ongesturechange or GestureEvent signal WebKit support.
  2. Branch early. Skip this event when unsupported.
  3. Plan a fallback. Point students to Touch / Pointer APIs.
  4. Optional enhancement. Only then attach gesturechange on Safari.

Example 2 — Log scale and rotation

MDN-style listener: print GestureEvent values while digits move.

JavaScript
const el = document.getElementById("stage");

el.addEventListener("gesturechange", (event) => {
  console.log("scale:", event.scale);
  console.log("rotation:", event.rotation);
});

console.log("Listener attached (needs Safari multi-touch)");
Try It Yourself

How It Works

  1. Listen on a stage. The element that receives the multi-touch gesture.
  2. Read scale. Relative to the start distance (1.0 at begin).
  3. Read rotation. Degrees since start; clockwise is positive (MDN).
  4. Expect silence elsewhere. Non-WebKit browsers will not fire this event.

Example 3 — Portable Pinch Idea (touchmove)

Cross-browser sketch: compute finger distance yourself with Touch Events.

JavaScript
const el = document.getElementById("stage");

function distance(a, b) {
  const dx = a.clientX - b.clientX;
  const dy = a.clientY - b.clientY;
  return Math.hypot(dx, dy);
}

let startDist = 0;

el.addEventListener("touchstart", (event) => {
  if (event.touches.length === 2) {
    startDist = distance(event.touches[0], event.touches[1]);
  }
});

el.addEventListener("touchmove", (event) => {
  if (event.touches.length === 2 && startDist) {
    const scale = distance(event.touches[0], event.touches[1]) / startDist;
    console.log("approx scale:", scale.toFixed(3));
  }
});
Try It Yourself

How It Works

  1. Measure start distance. On two-finger touchstart, store the gap.
  2. On touchmove. Divide current distance by start → approximate scale.
  3. Works more widely. Touch Events are the portable path MDN-style apps need.
  4. Optional Safari boost. You may still listen for gesturechange where available.
Compatibility

Browser Support

Element gesturechange is Non-standard on MDN (WebKit proprietary). It is not Deprecated or Experimental. Not Baseline — Safari/iOS focused.

✓ Non-standard · WebKit

Element gesturechange

Fires while digits move in a multi-touch gesture. Exposes GestureEvent.scale and rotation.

WebKit Safari / related WebKit
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
gesturechange Non-standard

Bottom line: Treat as Safari learning / optional enhancement. Ship Touch Events or Pointer Events for cross-browser pinch and rotate.

Frequently Asked Questions

It is a proprietary WebKit event fired when digits move during a touch gesture (MDN). The event object is a GestureEvent with scale and rotation. MDN marks it Non-standard.
MDN marks Element gesturechange as Non-standard only — not Deprecated and not Experimental. Still avoid it as the primary API in cross-browser production apps.
It is WebKit-specific. Expect Safari on iOS (and related WebKit contexts). Chrome, Firefox, and Edge generally do not implement this event.
scale is a multiplier of the initial finger distance (1.0 at start; below 1.0 = inward pinch/zoom out; above 1.0 = outward unpinch/zoom in). rotation is degrees since the gesture began (positive = clockwise) — MDN GestureEvent.
For portable pinch/zoom, prefer Touch Events or Pointer Events and compute distance yourself. Feature-detect GestureEvent only as an optional Safari enhancement.
gesturestart begins the gesture, gesturechange fires while digits move, and gestureend fires when the gesture finishes.

Next: gestureend

Learn the WebKit event that fires when a multi-touch gesture finishes.

gestureend 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)

10 people found this page helpful

JavaScript Element fullscreenerror Event JavaScript Element gestureend Event