JavaScript Element pointerup Event

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

Definition

In JavaScript, the pointerup event fires when a pointer is no longer active (MDN)—mouse last-button release, finger lift, or stylus lift. It is a PointerEvent. Remember you may get pointercancel instead.

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

Syntax

Listen for pointerup. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element listening for end
PointerEventRequired. Id, type, coords, buttons

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Listen for pointerup

MDN-style listener — log when the pointer is no longer active.

JavaScript
const para = document.querySelector("p");

para.addEventListener("pointerup", (event) => {
  console.log("Pointer up");
});
Try It Yourself

How It Works

  1. Select the target. Any Element can listen for pointerup.
  2. Add the listener. Use addEventListener or onpointerup.
  3. Release the pointer. Mouse last button, finger lift, or pen lift.
  4. Expect cancel sometimes. Pair with pointercancel for cleanup.

Example 2 — Read pointerType

See whether the release came from mouse, touch, or pen.

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

box.addEventListener("pointerup", (event) => {
  out.textContent =
    event.pointerType +
    " up @ " +
    event.clientX +
    "," +
    event.clientY;
});
Try It Yourself

How It Works

  1. One listener for all devices. Pointer Events unify mouse, touch, and pen.
  2. Read pointerType. Common values: "mouse", "touch", "pen".
  3. Optional coords. clientX / clientY show where the release happened.
  4. Use for logging or device-specific finish logic — keep primary clicks on click.

Example 3 — End vs Cancel Cleanup

Clear press state on both successful up and abort cancel.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
let pressed = false;

function clearPress(reason) {
  pressed = false;
  out.textContent = reason;
}

box.addEventListener("pointerdown", () => {
  pressed = true;
  out.textContent = "pressed";
});

box.addEventListener("pointerup", () => {
  clearPress("pointerup — finished");
});

box.addEventListener("pointercancel", () => {
  clearPress("pointercancel — aborted");
});
Try It Yourself

How It Works

  1. Start on down. Mark a pressed / dragging flag.
  2. Finish on up. Normal end clears state and completes the gesture.
  3. Abort on cancel. MDN: cancel may replace up — still clear UI.
  4. Don’t treat cancel as a click. Only successful up paths should commit actions.
Compatibility

Browser Support

Element pointerup is Baseline Widely available on MDN (since July 2020). Pointer Events work across modern evergreen browsers.

✓ Baseline · Widely available

Element pointerup

PointerEvent when a pointer is no longer active — mouse, touch, and pen.

96% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
pointerup Excellent

Bottom line: Safe for modern web apps. Pair with pointercancel for cleanup. Prefer click for accessible activate actions.

Frequently Asked Questions

It fires when a pointer is no longer active (MDN)—for example when a mouse’s last held button is released, a finger lifts, or a stylus lifts.
No. MDN marks Element pointerup as Baseline Widely available (since July 2020). It is not Deprecated, Experimental, or Non-standard.
A PointerEvent. Useful fields include pointerId, pointerType, isPrimary, clientX, and clientY.
With a physical mouse, mouseup fires whenever any button is released. pointerup fires only on the last button release; releasing earlier buttons while others stay held does not fire pointerup (MDN).
Yes. MDN notes it is possible to get pointercancel instead of a normal pointerup—for example when the browser aborts the gesture. Always clear state on both paths.
Use it to end unified mouse/touch/pen gestures started with pointerdown (drag release, ink lift). Keep primary activate actions on click for keyboard accessibility.

Next: scroll

Learn the Element scroll event.

scroll 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 pointerrawupdate Event JavaScript Element scroll Event