JavaScript Element touchmove Event

What You’ll Learn

The touchmove event fires when one or more touch points move along the surface. Learn TouchEvent, changedTouches, passive listeners, drag patterns, Pointer Events alternatives, and five try-it labs.

Introduction

After touchstart, sliding a finger fires touchmove repeatedly. That is the signal for custom drag, swipe tracking, and ink-style drawing on touch devices.

Like other touch events, it can fire at a high rate. Keep handlers light, prefer { passive: true } when you do not call preventDefault(), and consider pointermove for mouse + pen + touch together.

Understanding touchmove

An instance event that answers: “Did one or more fingers move on the surface?”

• Trigger — touch points move along the surface.
• Event type — TouchEvent; use changedTouches.
• Bubbles — yes; cancelable when you need to block default gestures.
• High rate — keep work cheap; throttle paint if needed.
• Limited availability on MDN (not Baseline)—desktop Safari often lacks Touch Events.

⚡ Passive Listeners & Scrolling

• Default recommendation: addEventListener("touchmove", fn, { passive: true }).
• Use a non-passive listener only when you must call preventDefault().
• CSS touch-action: none (or pan-x / pan-y) can declare intent without fighting every move event.

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("touchmove", (event) => { });

ontouchmove = (event) => { };

Event type

A TouchEvent (inherits from UIEvent / Event).

Handy TouchEvent properties

⚖️ touchmove vs Related Signals

Examples Gallery

Patterns follow MDN Element: touchmove event and the Touch events guide. Use a touch device or DevTools touch simulation; some labs include mouse fallbacks for desktop practice.

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

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

x=156 y=92

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

pad.ontouchmove = (event) => {
  out.textContent = "ontouchmove · n=" + event.changedTouches.length;
};

ontouchmove · n=1

const pad = document.getElementById("pad");
const dot = document.getElementById("dot");

function moveDot(clientX, clientY) {
  const r = pad.getBoundingClientRect();
  const x = clientX - r.left;
  const y = clientY - r.top;
  dot.style.left = x + "px";
  dot.style.top = y + "px";
}

pad.addEventListener("touchmove", (event) => {
  const t = event.changedTouches[0];
  if (t) moveDot(t.clientX, t.clientY);
}, { passive: true });

Dot follows the finger across the pad

const pad = document.getElementById("pad");
const out = document.getElementById("out");
let n = 0;

pad.addEventListener("touchstart", () => {
  n = 0;
  out.textContent = "moves=0";
}, { passive: true });

pad.addEventListener("touchmove", () => {
  n += 1;
  out.textContent = "moves=" + n;
}, { passive: true });

moves=24

const out = document.getElementById("out");
const hasTouch = "ontouchmove" in window;

out.textContent = hasTouch
  ? "Touch Events available — listen for touchmove"
  : "No Touch Events — use Pointer Events (pointermove)";

if (hasTouch) {
  document.getElementById("pad").addEventListener(
    "touchmove",
    () => { out.textContent = "touchmove received"; },
    { passive: true }
  );
}

No Touch Events — use Pointer Events (pointermove)

🚀 Common Use Cases

• Custom drag-and-drop and slider thumbs on touch devices.
• Swipe / pan tracking for carousels (often with touch-action).
• Drawing / signature pads that follow the finger.
• Live position feedback while a gesture is in progress.
• Migrating toward pointermove for mouse + pen + touch.

🔧 How It Works

📝 Notes

• MDN: Limited availability (not Baseline)—no Deprecated / Experimental / Non-standard banner.
• Prefer { passive: true } unless you must call preventDefault().
• Desktop Safari often lacks Touch Events; test on iOS Safari / Android browsers.
• Prefer Pointer Events for new cross-device interaction code.
• Related learning: touchend, touchcancel, pointermove, addEventListener(), JavaScript hub.

💡 Best Practices