JavaScript Element touchmove Event

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

Definition

In JavaScript, the touchmove event fires when one or more touch points move along the touch surface (MDN)—while a finger slides. The event object is a TouchEvent. It sits between touchstart and touchend (or touchcancel).

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

Syntax

Listen for touchmove. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element (or ancestor) listening for moves
TouchEventRequired. Carries changedTouches, touches, modifiers

Return Value

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

JavaScript Examples

Example 1 — Listen for touchmove

Log whenever a finger slides on the pad (passive listener).

JavaScript
const pad = document.getElementById("pad");
const out = document.getElementById("out");

pad.addEventListener("touchmove", (event) => {
  out.textContent =
    "touchmove · moved=" + event.changedTouches.length;
}, { passive: true });
Try It Yourself

How It Works

  1. Get the pad. The element that tracks sliding fingers.
  2. Register the listener. touchmove runs while contacts move.
  3. Stay passive. { passive: true } tells the browser you will not call preventDefault.
  4. Count moved points. changedTouches.length is how many fingers moved in this event.

Example 2 — Read Move Coordinates

Print clientX / clientY from the first moved contact.

JavaScript
const pad = document.getElementById("pad");
const out = document.getElementById("out");

pad.addEventListener("touchmove", (event) => {
  const t = event.changedTouches[0];
  if (!t) return;
  out.textContent =
    "move at x=" + Math.round(t.clientX) +
    " y=" + Math.round(t.clientY);
}, { passive: true });
Try It Yourself

How It Works

  1. Wait for a slide. The handler runs on each touchmove.
  2. Pick the point. changedTouches[0] is the first contact that moved.
  3. Read coordinates. clientX / clientY are viewport-relative pixels.
  4. Guard empty lists. Return early if somehow empty so nothing throws.

Example 3 — Track Drag Delta

Store start position on touchstart; print dx / dy on move.

JavaScript
const pad = document.getElementById("pad");
const out = document.getElementById("out");
let startX = 0;
let startY = 0;

pad.addEventListener("touchstart", (event) => {
  const t = event.changedTouches[0];
  if (!t) return;
  startX = t.clientX;
  startY = t.clientY;
  out.textContent = "dragging…";
}, { passive: true });

pad.addEventListener("touchmove", (event) => {
  const t = event.changedTouches[0];
  if (!t) return;
  const dx = Math.round(t.clientX - startX);
  const dy = Math.round(t.clientY - startY);
  out.textContent = "dx=" + dx + " dy=" + dy;
}, { passive: true });
Try It Yourself

How It Works

  1. Remember the start. On touchstart, save clientX / clientY.
  2. Compute the delta. On each move, subtract start from current position.
  3. Show the offset. Positive dx means right; positive dy means down.
  4. Keep it light. Only math and a text update—safe for frequent touchmove events.
Compatibility

Browser Support

touchmove is marked Limited availability on MDN (not Baseline). Touch Events are reliable on mobile browsers; many desktop browsers omit or limit them. Prefer Pointer Events for mouse + pen + touch together.

✓ Limited availability

Element touchmove

Fires while touch points slide. Strong on mobile Chrome / Firefox / Safari iOS / Edge; desktop Safari often lacks Touch Events.

Partial Not Baseline
Google Chrome Touch-capable / mobile
Supported
Mozilla Firefox Mobile & touch-enabled
Supported
Apple Safari iOS yes · desktop often no
Partial
Microsoft Edge Touch-capable / Chromium
Supported
Opera Mobile / Chromium touch paths
Partial
Internet Explorer Use Pointer Events instead
Unavailable
touchmove Limited

Bottom line: Use touchmove for Touch Events drag tracking on mobile. For unified input across devices, ship pointermove with Pointer Events.

Frequently Asked Questions

It fires when one or more touch points move along the touch surface—continuously while a finger slides (MDN).
No. MDN does not mark Element touchmove as Deprecated, Experimental, or Non-standard. It has Limited availability (not Baseline), mainly because some desktop browsers omit or limit Touch Events.
A TouchEvent. Use changedTouches for the points that just moved; also inspect touches and targetTouches when needed.
touchmove can fire at a high rate. A non-passive listener that may call preventDefault can delay scrolling. Prefer { passive: true } unless you must block the browser’s default pan/zoom.
touchmove is Touch Events only. pointermove works for mouse, pen, and touch. For new cross-device UIs, prefer Pointer Events.
touch-action can limit which gestures the browser handles (pan, zoom). It often pairs with custom drag code that listens for touchmove.

Next: touchstart

Handle the finger-down signal that starts every touch gesture.

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

11 people found this page helpful

JavaScript Element touchend Event JavaScript Element touchstart Event