References

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

The HTML onlostpointercapture event

Event All modern browsers Updated
Quick answer

The HTML onlostpointercapture attribute runs JavaScript when a captured pointer is released from the element. It is an inline handler for the lostpointercapture event; in modern code prefer addEventListener('lostpointercapture', …).

Overview

The onlostpointercapture event attribute runs JavaScript when the element loses pointer capture. In JavaScript the event itself is named lostpointercapture — drop the on prefix when you call addEventListener.

It is one of the Pointer Events — a unified input model that covers mouse, touch and pen with a single set of events. The handler receives a PointerEvent whose pointerType tells you the input kind (mouse, touch or pen), along with pressure and tilt for styluses. Pointer events are the recommended modern choice over separate mouse and touch handlers.

You can wire this up with the inline onlostpointercapture HTML attribute, but the modern, recommended approach is element.addEventListener('lostpointercapture', 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 onlostpointercapture="handler()">…</element>

element.addEventListener('lostpointercapture', handler);

Best practices

  • Prefer element.addEventListener('lostpointercapture', handler) over the inline onlostpointercapture attribute — it separates behavior from markup and allows multiple handlers.
  • Prefer pointer events over separate mouse and touch handlers — one set of code covers every input type.
  • Check event.pointerType when you need to treat mouse, touch and pen differently.
  • Use setPointerCapture() for drag-style interactions so the element keeps receiving events.

Frequently asked questions

What is the onlostpointercapture event?
It runs JavaScript when the element loses pointer capture. In JavaScript the event is named lostpointercapture.
What is the difference between pointer events and mouse events?
Pointer events unify mouse, touch and pen into one model, so you write a single handler instead of separate mouse and touch code.
How do I tell mouse, touch and pen apart?
Read event.pointerType, which is mouse, touch or pen.
Should I use the onlostpointercapture attribute or addEventListener?
Prefer addEventListener('lostpointercapture', …) in JavaScript. The inline onlostpointercapture attribute works but mixes behavior into the markup and allows only one handler per element.
onloadstart onmessage