JavaScript Element pointerup Event

What You’ll Learn

The pointerup event fires when a pointer is no longer active. Learn addEventListener vs onpointerup, how it differs from mouseup, why you must also handle pointercancel, ending drag after setPointerCapture, and five try-it labs.

Introduction

pointerup answers: “Did this pointer just become inactive?” That covers mouse (last button released), touch (finger up), and pen (stylus lift) under one API.

Pair it with pointerdown to start/end gestures. MDN also reminds you that a gesture can end with pointercancel instead—clear state on both paths.

Understanding pointerup

An instance event that answers: “Did this pointer just go inactive?”

• Mouse — last held button released (not each earlier release).
• Touch — contact ends (finger lifts).
• Pen — stylus lifts from the digitizer.
• Alt end — pointercancel may replace a normal up.
• Baseline Widely available on MDN (since July 2020).

📝 Syntax

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

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

onpointerup = (event) => { };

Event type

A PointerEvent (inherits from MouseEvent and Event).

Handy properties

⚖️ pointerup vs Related Events

🚫 Always Pair with pointercancel

MDN: remember it is possible to get pointercancel instead of pointerup. Mobile browsers, stylus interruptions, and system gestures can abort a pointer mid-drag.

• Share one endGesture() function for both up and cancel.
• Release capture / CSS pressed states in that shared cleanup.
• Do not assume every pointerdown gets a matching pointerup.

Examples Gallery

Examples follow MDN Element: pointerup event. Press and release with a mouse, touch, or pen on the stage elements.

const para = document.querySelector("p");
const out = document.getElementById("out");

para.addEventListener("pointerup", (event) => {
  out.textContent = "Pointer up";
});

Pointer up

const para = document.querySelector("p");
const out = document.getElementById("out");

para.onpointerup = (event) => {
  out.textContent = "onpointerup at " + event.clientX + "," + event.clientY;
};

onpointerup at 84,36

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

stage.addEventListener("pointerup", (event) => {
  out.textContent =
    "up id=" + event.pointerId +
    " type=" + event.pointerType +
    " primary=" + event.isPrimary;
});

up id=1 type=mouse primary=true

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

handle.addEventListener("pointerdown", (event) => {
  handle.setPointerCapture(event.pointerId);
  handle.classList.add("is-dragging");
  out.textContent = "dragging id=" + event.pointerId;
});

function endDrag(label) {
  handle.classList.remove("is-dragging");
  out.textContent = label;
}

handle.addEventListener("pointerup", () => endDrag("released (pointerup)"));
handle.addEventListener("pointercancel", () => endDrag("aborted (pointercancel)"));

released (pointerup)

const stage = document.getElementById("stage");
const out = document.getElementById("out");
let pointerCount = 0;
let mouseCount = 0;

stage.addEventListener("pointerup", () => {
  pointerCount++;
  render();
});

stage.addEventListener("mouseup", () => {
  mouseCount++;
  render();
});

function render() {
  out.textContent =
    "pointerup=" + pointerCount + " mouseup=" + mouseCount;
}

pointerup=1 mouseup=2

🚀 Common Use Cases

• End drag, draw, or resize sessions for mouse, touch, and pen.
• Clear pressed / active feedback after release.
• Drop setPointerCapture session state when the pointer goes inactive.
• Branch by pointerType when stylus lift should behave differently.
• Teach unified Pointer Events vs mouse-only mouseup.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2020) — no Deprecated / Experimental / Non-standard banner.
• Primary UI actions: prefer click so keyboard users share the same path.
• Clear gesture state on both pointerup and pointercancel.
• Mouse multi-button: pointerup = last release only; mouseup = every release.
• Related learning: pointerrawupdate, scroll, pointerdown, addEventListener(), JavaScript hub.

💡 Best Practices