JavaScript Element touchstart Event

What You’ll Learn

The touchstart event fires when one or more touch points are placed on the surface. Learn TouchEvent, changedTouches, press patterns, multi-touch counts, Pointer Events alternatives, and five try-it labs.

Introduction

touchstart is the beginning of a touch gesture: one or more fingers (or stylus contacts that go through Touch Events) touch the surface. Use it to mark “pressed,” start a drag, or record the initial contact point.

After start comes touchmove while sliding, then touchend on lift—or touchcancel if the system aborts. For new cross-device UIs, prefer pointerdown.

Understanding touchstart

An instance event that answers: “Did one or more fingers just touch down?”

• Trigger — touch points placed on the surface.
• Event type — TouchEvent; use changedTouches.
• Bubbles — yes; cancelable behavior can vary by UA.
• Starts the chain — often followed by move / end / cancel.
• Limited availability on MDN (not Baseline)—desktop Safari often lacks Touch Events.

📝 Syntax

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

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

ontouchstart = (event) => { };

Event type

A TouchEvent (inherits from UIEvent / Event).

Handy TouchEvent properties

Passive tip

Prefer { passive: true } when you only observe the start and do not call preventDefault().

⚖️ touchstart vs Related Signals

Examples Gallery

Patterns follow MDN Element: touchstart 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("touchstart", (event) => {
  out.textContent =
    "touchstart · down=" + event.changedTouches.length;
}, { passive: true });

touchstart · down=1

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

pad.ontouchstart = (event) => {
  out.textContent = "ontouchstart fired";
};

ontouchstart fired

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

pad.addEventListener("touchstart", (event) => {
  pad.classList.add("pressed");
  const t = event.changedTouches[0];
  out.textContent = t
    ? "start x=" + Math.round(t.clientX) + " y=" + Math.round(t.clientY)
    : "start";
}, { passive: true });

pad.addEventListener("touchend", () => pad.classList.remove("pressed"));
pad.addEventListener("touchcancel", () => pad.classList.remove("pressed"));

start x=118 y=74

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

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

pad.addEventListener("touchstart", showCount, { passive: true });
pad.addEventListener("touchend", showCount);
pad.addEventListener("touchcancel", showCount);

fingers down=2

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

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

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

No Touch Events — use Pointer Events (pointerdown)

🚀 Common Use Cases

• Apply pressed / active styles when a finger goes down.
• Record the initial point for drag, swipe, or drawing.
• Start long-press timers that cancel on move / end.
• Count simultaneous fingers for multi-touch gestures.
• Migrate toward pointerdown for mouse + pen + touch.

🔧 How It Works

📝 Notes

• MDN: Limited availability (not Baseline)—no Deprecated / Experimental / Non-standard banner.
• Prefer { passive: true } when you only observe the start.
• Do not use ontouchstart alone as a mobile device detector.
• Prefer Pointer Events for new cross-device interaction code.
• Related learning: touchmove, touchend, pointerdown, addEventListener(), JavaScript hub.

💡 Best Practices