References

Beginner-friendly references for web development, with live, editable examples.

The HTML ontouchmove event

Event All modern browsers Updated
Quick answer

The HTML ontouchmove attribute runs JavaScript when one or more touch points move along the touch surface. It is an inline handler for the touchmove event; in modern code prefer addEventListener('touchmove', …).

Overview

The ontouchmove event attribute runs JavaScript when a touch moves on the element. In JavaScript the event itself is named touchmove — drop the on prefix when you call addEventListener.

It is one of the Touch Events. The handler receives a TouchEvent whose touches list describes every active touch point, which is what makes multi-touch gestures possible. For most needs, though, the unified pointer events are now preferred over touch-specific handlers.

You can wire this up with the inline ontouchmove HTML attribute, but the modern, recommended approach is element.addEventListener('touchmove', handler) in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.

Syntax

<element ontouchmove="handler()">…</element>

element.addEventListener('touchmove', handler);

Best practices

  • Prefer element.addEventListener('touchmove', handler) over the inline ontouchmove attribute — it separates behavior from markup and allows multiple handlers.
  • Prefer the unified pointer events unless you specifically need multi-touch details.
  • Iterate event.touches (or changedTouches) to handle each touch point.
  • Call preventDefault() when you need to stop the browser's default scrolling or zooming.

Frequently asked questions

What is the ontouchmove event?
It runs JavaScript when a touch moves on the element. In JavaScript the event is named touchmove.
Should I use touch events or pointer events?
For most interactions, pointer events are preferred — they cover touch, mouse and pen. Reach for touch events when you need detailed multi-touch handling.
How do I access the touch points?
Read the event.touches list (or event.changedTouches) from the TouchEvent.
Should I use the ontouchmove attribute or addEventListener?
Prefer addEventListener('touchmove', …) in JavaScript. The inline ontouchmove attribute works but mixes behavior into the markup and allows only one handler per element.
ontouchend ontouchstart