References

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

The HTML ontouchend event

Event All modern browsers Updated
Quick answer

The HTML ontouchend attribute runs JavaScript when one or more touch points are removed from the touch surface. It is an inline handler for the touchend event; in modern code prefer addEventListener('touchend', …).

Overview

The ontouchend event attribute runs JavaScript when a touch ends on the element. In JavaScript the event itself is named touchend — 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 ontouchend HTML attribute, but the modern, recommended approach is element.addEventListener('touchend', 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 ontouchend="handler()">…</element>

element.addEventListener('touchend', handler);

Best practices

  • Prefer element.addEventListener('touchend', handler) over the inline ontouchend 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 ontouchend event?
It runs JavaScript when a touch ends on the element. In JavaScript the event is named touchend.
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 ontouchend attribute or addEventListener?
Prefer addEventListener('touchend', …) in JavaScript. The inline ontouchend attribute works but mixes behavior into the markup and allows only one handler per element.
ontouchcancel ontouchmove