JavaScript Element touchstart Event

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

Definition

In JavaScript, the touchstart event fires when one or more touch points are placed on the touch surface (MDN)—the start of a gesture. The event object is a TouchEvent. Next usually comes touchmove, then touchend (or touchcancel).

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

Syntax

Listen for touchstart. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element (or ancestor) listening for the press
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 touchstart

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

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

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

How It Works

  1. Get the pad. The element that receives the finger press.
  2. Register the listener. touchstart runs when contacts are placed.
  3. Stay passive. { passive: true } when you do not call preventDefault.
  4. Count new points. changedTouches.length is how many fingers just went down.

Example 2 — Read Press Coordinates

Print clientX / clientY from the first new contact.

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

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

How It Works

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

Example 3 — Press Count & Cleanup

Track how many contacts are down; clear the label on end or cancel.

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

function showTouches(event) {
  out.textContent = "touches down: " + event.touches.length;
}

function clear() {
  out.textContent = "idle";
}

pad.addEventListener("touchstart", showTouches, { passive: true });
pad.addEventListener("touchend", showTouches);
pad.addEventListener("touchcancel", clear);
Try It Yourself

How It Works

  1. Start updates the count. On touchstart, event.touches.length is all current contacts.
  2. End updates again. On touchend, the lifted point is gone from touches.
  3. Cancel resets. On touchcancel, clear UI instead of treating it as a tap.
  4. Multi-touch ready. The same pattern works when more than one finger is down.
Compatibility

Browser Support

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

Fires when touch points land. 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
touchstart Limited

Bottom line: Use touchstart for Touch Events press handling on mobile. For unified input across devices, ship pointerdown with Pointer Events.

Frequently Asked Questions

It fires when one or more touch points are placed on the touch surface—the start of a touch gesture (MDN).
No. MDN does not mark Element touchstart 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 went down; also inspect touches and targetTouches when needed.
No. Many desktop browsers hide or expose Touch Events in ways that make “has ontouchstart” a poor mobile detector. Prefer feature detection for the APIs you use, or Pointer Events for cross-device input.
touchstart is Touch Events only. pointerdown works for mouse, pen, and touch. For new cross-device UIs, prefer Pointer Events.
Usually touchmove while sliding, then touchend on lift—or touchcancel if the gesture is aborted.

Next: transitioncancel

Continue with the next Element event in the sidebar — CSS transition cancellation.

transitioncancel 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 touchmove Event JavaScript Element transitioncancel Event