The gesturechange event fires while fingers move during a WebKit multi-touch gesture. Learn scale / rotation, ongesturechange, gesturestart / gestureend, portable alternatives, and five try-it labs.
Instance event
GestureEvent
Digits move mid-gesture
ongesturechange
scale / rotation
Non-standard
Pinch-to-zoom and two-finger rotate feel natural on phones. WebKit exposed that motion with a small family of events: gesturestart, gesturechange, and gestureend, using the GestureEvent interface.
gesturechange is the “while moving” update. Other browsers never standardized it. For production apps, treat it as an optional Safari path—not the only path.
On Chrome/Firefox desktop, these listeners often never run. Always feature-detect ("ongesturechange" in window or window.GestureEvent) and keep a Touch / Pointer fallback.
gesturechangeAn instance event that answers: “Are the user’s fingers still moving during an active multi-touch gesture?”
scale and rotation.ongesturechange or addEventListener("gesturechange", ...).gesturestart → gesturechange* → gestureend.Use the event name with addEventListener, or set the handler property:
addEventListener("gesturechange", (event) => { });
ongesturechange = (event) => { };A GestureEvent (inherits from UIEvent and Event).
| Property | Meaning |
|---|---|
scale | Finger-distance multiplier vs gesture start (1.0 initial; <1 pinch; >1 spread) |
rotation | Degrees rotated since gesture start (positive = clockwise; initial 0.0) |
gesturestart — multiple fingers begin a gesturegesturechange — repeated while digits movegestureend — gesture finishes| Approach | Pros | Cons |
|---|---|---|
gesturechange | Built-in scale / rotation | Non-standard; WebKit-only |
| Touch Events | Wide mobile support | You compute pinch math yourself |
| Pointer Events | Mouse + touch + pen unified | More setup for multi-pointer tracking |
wheel (+ modifiers) | Useful on some desktop trackpads | Not a full substitute for multi-touch rotate |
| Goal | Code / note |
|---|---|
| Listen (WebKit) | el.addEventListener("gesturechange", fn) |
| Handler property | el.ongesturechange = fn |
| Read zoom factor | event.scale |
| Read twist | event.rotation |
| Feature-detect | "GestureEvent" in window |
| MDN status | Non-standard |
Four facts to remember about gesturechange.
GestureEventWebKit proprietary
digits movingMid-gesture
scale · rotationPinch & twist
non-standardNot for sole use
Examples follow MDN Element: gesturechange event. Real pinch gestures need a WebKit touch device; labs also show detect / simulate paths.
Basic listeners and the handler property.
scale and rotationPrint GestureEvent fields while a WebKit gesture is active.
const stage = document.getElementById("stage");
const out = document.getElementById("out");
stage.addEventListener("gesturechange", (event) => {
out.textContent =
"scale=" + event.scale.toFixed(3) +
" rotation=" + event.rotation.toFixed(1) + "°";
});On unsupported browsers nothing appears until you use the detect / fallback labs.
ongesturechange PropertySame idea using the handler property form.
const stage = document.getElementById("stage");
const out = document.getElementById("out");
stage.ongesturechange = (event) => {
out.textContent = "ongesturechange scale=" + event.scale.toFixed(3);
};Prefer addEventListener when you need multiple listeners or easy removal.
Feature-detect WebKit support, apply CSS, keep a touch path.
GestureEventTell learners whether this engine exposes the proprietary API.
const out = document.getElementById("out");
const supported = typeof window.GestureEvent === "function" ||
"ongesturechange" in window;
out.textContent = supported
? "GestureEvent / ongesturechange looks available (likely WebKit)."
: "No GestureEvent here — use Touch/Pointer fallback.";
if (supported) {
document.getElementById("stage").addEventListener("gesturechange", (e) => {
out.textContent = "Live scale=" + e.scale.toFixed(3);
});
}Detection strings vary by engine. Treat any positive result as “optional enhancement,” not a guarantee of touch hardware.
Map event.scale onto a visual element during the gesture.
const stage = document.getElementById("stage");
const card = document.getElementById("card");
let base = 1;
stage.addEventListener("gesturestart", (event) => {
event.preventDefault();
base = Number(card.dataset.scale || 1);
});
stage.addEventListener("gesturechange", (event) => {
event.preventDefault();
const next = base * event.scale;
card.style.transform = "scale(" + next + ")";
card.dataset.live = String(next);
});
stage.addEventListener("gestureend", () => {
card.dataset.scale = card.dataset.live || card.dataset.scale || "1";
});preventDefault() may be required to stop the browser’s own page zoom. Use a non-passive listener when you need cancelable behavior.
Compute a simple pinch factor from Touch Events when GestureEvent is missing.
const stage = document.getElementById("stage");
const out = document.getElementById("out");
let startDist = 0;
function distance(t0, t1) {
const dx = t0.clientX - t1.clientX;
const dy = t0.clientY - t1.clientY;
return Math.hypot(dx, dy);
}
stage.addEventListener("touchstart", (event) => {
if (event.touches.length === 2) {
startDist = distance(event.touches[0], event.touches[1]);
}
}, { passive: true });
stage.addEventListener("touchmove", (event) => {
if (event.touches.length === 2 && startDist > 0) {
const scale = distance(event.touches[0], event.touches[1]) / startDist;
out.textContent = "touch pinch scale≈" + scale.toFixed(3);
}
}, { passive: true });
if ("GestureEvent" in window) {
stage.addEventListener("gesturechange", (event) => {
out.textContent = "gesturechange scale=" + event.scale.toFixed(3);
});
}This is the beginner-friendly portable approach. Keep GestureEvent as an optional WebKit shortcut when present.
scale / rotation values.gesturestart begins; scale starts at 1.0.
gesturechange updates scale / rotation.
Apply CSS transforms or zoom a canvas layer.
Commit the final scale and clear temporary state.
gesturechange is marked Non-standard on MDN. Logos use the shared browser-image-sprite.png sprite from this project. Expect WebKit/Safari paths only—always ship a Touch or Pointer fallback.
Proprietary WebKit multi-touch gesture updates; not a portable primary API.
Bottom line: Use GestureEvent only as an optional Safari enhancement; compute pinch with Touch/Pointer Events for everyone else.
gesturechange is a Non-standard WebKit signal for mid-gesture pinch and rotate. Know scale and rotation, feature-detect carefully, and keep Touch / Pointer Events as your portable foundation.
Continue with gestureend, addEventListener(), or the JavaScript hub.
gesturestart / gestureend for full lifecyclegesturechangepreventDefault)ongesturechange if you need multiple listenersgesturechangeWebKit mid-gesture updates—Non-standard; prefer portable pinch math.
mid-gesture
Triggerscale · rotation
APIWebKit only
Statusportable pinch
Replaceoptional enhance
PatternMDN lists gesturechange under “Not part of any specification.” That is why libraries rarely depend on it alone—standards favor Touch Events and Pointer Events for multi-touch.
Learn the WebKit signal that a multi-touch gesture has finished.
5 people found this page helpful