Touch Events

Touch Events

Touch events (touchstart, touchmove, touchend, touchcancel) carry three TouchLists: touches (every finger on the screen), targetTouches (fingers that started on this element) and changedTouches (fingers that changed in this event). Each Touch has an identifier, clientX/Y, pageX/Y, radiusX/Y and force. Desktop Safari 10 lacks them, so prefer pointer events (Pointer Events) and keep touch events for multi-finger gestures such as a pinch:

Scaling a photo with a two-finger pinchJavaScript

const gap = ([a, b]) => Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
let start = 0;
photo.ontouchstart = (e) => { if (e.touches.length === 2) start = gap(e.touches); };
photo.ontouchmove = (e) => {
  if (e.touches.length === 2) photo.style.scale = (gap(e.touches) / start).toFixed(2);
};

Give the photo touch-action: none so the browser does not zoom the page as well (Handling Smartphone Events).

MENU