Preventing touch gestures on a web page

Why Prevent Gestures

By default, a touch-enabled device allows a user to pan and zoom a web app. But sometimes this is not something that’s appropriate for an app.

Here’s how to prevent these gestures from messing up your web app:

Prevent Panning and Zooming

1
2
3
html, body {
  touch-action: none;
}

This will prevent single-finger panning, and two-finger pinch zooming on all elements. This does not, however, disable the double-tap to zoom feature. Disabling double-tap zoom requires a different method.

Prevent Double-Tap Zoom

This zoom effect can be annoying, as clicking a button twice can invoke it.

In order to prevent it, place a listener for dblclick on the element being clicked:

1
2
3
4
5
6
7
8
// gobble up the 'dblclick' event
function gobbleDblclick (ev) {
  ev.preventDefault();
  ev.stopPropagation();
}

// add listener to element
myelement.addEventListener('dblclick', gobbleDblclick);

Another option to disable double-tap to zoom is with CSS:

1
2
3
4
/* disable double-tap to zoom */
.no-double-tap-zoom {
  touch-action: manipulation;
}

This disables double-tap to zoom, but it enables panning and pinch zoom.