Element: pointerup — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("pointerup", handler)

Beschreibung

Das Ereignis pointerup gehört zur Pointer Events API. Es wird an einem Element ausgelöst, wenn ein Zeiger seinen aktiven Zustand verlässt: bei der Maus, sobald die letzte gedrückte Taste losgelassen wird, bei Touch, sobald der Finger den Bildschirm verlässt, und beim Stift, sobald er die Oberfläche nicht mehr berührt. Damit ist es das geräteunabhängige Gegenstück zu mouseup und touchend.

Man registriert es entweder per element.addEventListener("pointerup", handler) oder über die Eigenschaft element.onpointerup = handler. Der Handler bekommt ein PointerEvent mit Eigenschaften wie pointerId, pointerType ("mouse", "pen", "touch"), clientX/clientY, pressure, button und isPrimary.

Typische Einsatzfälle: Drag-and-Drop, Zeichenflächen, Schieberegler oder eigene Buttons, bei denen eine Aktion nach dem Loslassen abgeschlossen wird. Das Ereignis steigt im DOM auf (bubbles), ist abbrechbar (cancelable) und composed, überquert also auch Shadow-DOM-Grenzen.

Wichtig: pointerup wird an dem Element ausgelöst, das sich beim Loslassen unter dem Zeiger befindet – es sei denn, der Zeiger wurde per setPointerCapture() an ein Element gebunden. Nach pointerup folgt bei Touch/Stift in der Regel pointerout und pointerleave; eine vorhandene Zeigerbindung wird automatisch aufgehoben (lostpointercapture).

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"pointerup"`.
$handler Pflicht	(event: PointerEvent) => void		Callback, der ein `PointerEvent` erhält.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `capture`, `once`, `passive` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein PointerEvent-Objekt.

Beispiele

Loslassen erkennen und Zeigertyp auswerten

const button = document.querySelector('#aktion');

button.addEventListener('pointerup', (event) => {
  console.log(`Losgelassen: ${event.pointerType}, Taste ${event.button}, bei ${event.clientX}/${event.clientY}`);
});

Losgelassen: mouse, Taste 0, bei 120/48

Drag mit Pointer Capture abschließen

const griff = document.querySelector('.slider-griff');
let startX = 0;

const onMove = (e) => {
  griff.style.transform = `translateX(${e.clientX - startX}px)`;
};

griff.addEventListener('pointerdown', (e) => {
  startX = e.clientX;
  griff.setPointerCapture(e.pointerId); // pointerup kommt garantiert hier an
  griff.addEventListener('pointermove', onMove);
});

const beenden = (e) => {
  griff.removeEventListener('pointermove', onMove);
  console.log('Drag beendet durch', e.type);
};

griff.addEventListener('pointerup', beenden);
griff.addEventListener('pointercancel', beenden); // z. B. bei Scroll-Geste

Drag beendet durch pointerup

on-Property und Entfernen des Listeners

const flaeche = document.querySelector('#zeichenflaeche');

// Variante 1: on-Property (nur ein Handler möglich)
flaeche.onpointerup = (e) => console.log('Strich beendet, Druck:', e.pressure);

// Variante 2: addEventListener mit AbortController entfernen
const controller = new AbortController();
flaeche.addEventListener('pointerup', () => console.log('einmalig gezählt'), {
  signal: controller.signal
});

// Später: alle per Signal registrierten Listener entfernen
controller.abort();
flaeche.onpointerup = null;

Strich beendet, Druck: 0

// Wichtig · Fallstricke

Immer auch pointercancel behandeln: Übernimmt der Browser eine Geste (Scrollen, Zoomen), kommt statt pointerup ein pointercancel. Ohne Behandlung bleibt ein Drag „hängen“. Mit touch-action: none im CSS lässt sich das bei Touch verhindern.
Zeiger außerhalb des Elements losgelassen: Ohne setPointerCapture() kommt pointerup am ursprünglichen Element nicht an. Alternativ den Listener auf window/document setzen.
Mehrere Maustasten: Bei der Maus wird pointerup erst ausgelöst, wenn alle Tasten losgelassen sind; Wechsel zwischen Tasten erzeugen pointermove mit geändertem buttons.
Multitouch: Jeder Finger hat eine eigene pointerId – bei Gesten mehrere Zeiger getrennt verfolgen.
preventDefault() auf pointerup verhindert nicht das spätere click-Ereignis; dafür muss man click selbst behandeln.
Kompatibilität: In allen aktuellen Browsern verfügbar (Safari seit 13). Für sehr alte Browser ggf. auf mouseup/touchend zurückfallen.

Siehe auch

Element: pointerout Element: pointerdown Element: pointermove Element: pointerover Element: mouseup