Element: mouseup — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("mouseup", handler)

Beschreibung

Das mouseup-Ereignis ist das Gegenstück zu mousedown. Es wird ausgelöst, sobald eine Maustaste (links, Mitte, rechts oder eine Zusatztaste) über einem Element losgelassen wird. Das Ereignis ist vom Typ MouseEvent, steigt im DOM auf (Bubbling) und lässt sich abbrechen.

Registrieren kannst du einen Handler entweder per element.addEventListener("mouseup", handler) oder über die Eigenschaft element.onmouseup = handler. Mit addEventListener kannst du mehrere Handler anhängen und sie gezielt mit removeEventListener wieder entfernen. Die on-Eigenschaft nimmt immer nur einen Handler auf.

Typische Einsatzfälle sind Drag-and-Drop-Logik, Zeichenflächen, eigene Schieberegler und Auswahlwerkzeuge, also alles, bei dem der Zeitpunkt des Loslassens zählt. Welche Taste losgelassen wurde, steht in event.button (0 = links, 1 = Mitte, 2 = rechts). event.buttons gibt die Tasten an, die danach noch gedrückt sind.

Die Reihenfolge der Ereignisse bei einem normalen Klick ist mousedown → mouseup → click. click wird aber nur ausgelöst, wenn Drücken und Loslassen auf demselben Element stattfinden. mouseup kommt dagegen immer bei dem Element an, über dem sich der Zeiger beim Loslassen befindet.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"mouseup"`.
$handler Pflicht	(event: MouseEvent) => void		Callback, der ein `MouseEvent` erhält, u. a. mit `button`, `buttons`, `clientX`/`clientY`, `offsetX`/`offsetY`, `target` und den Zusatztasten-Flags `shiftKey`, `ctrlKey`, `altKey` und `metaKey`.
$options	boolean \| { capture?: boolean, once?: boolean, passive?: boolean, signal?: AbortSignal }	false	Optionale Listener-Optionen. `once: true` entfernt den Listener nach dem ersten Aufruf automatisch. Mit `signal` lässt er sich über einen `AbortController` entfernen.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Rückgabewert des Handlers wird ignoriert. Standardverhalten unterdrückst du mit event.preventDefault().

Beispiele

Losgelassene Taste per addEventListener erkennen

const box = document.querySelector('#box');

const tastenNamen = ['links', 'mitte', 'rechts', 'zurück', 'vor'];

box.addEventListener('mouseup', (event) => {
  const name = tastenNamen[event.button] ?? `Taste ${event.button}`;
  console.log(`Losgelassen: ${name} bei (${event.offsetX}, ${event.offsetY})`);
});

Losgelassen: links bei (42, 17)

Drag-Vorgang robust beenden (mouseup auf document)

const griff = document.querySelector('.slider-griff');
let ziehen = false;

const onMove = (e) => {
  if (!ziehen) return;
  griff.style.left = `${e.clientX}px`;
};

const onUp = () => {
  ziehen = false;
  document.removeEventListener('mousemove', onMove);
  document.removeEventListener('mouseup', onUp);
  console.log('Ziehen beendet');
};

griff.addEventListener('mousedown', (e) => {
  e.preventDefault(); // Textauswahl verhindern
  ziehen = true;
  // Auf document lauschen, damit das Loslassen auch außerhalb des Griffs ankommt
  document.addEventListener('mousemove', onMove);
  document.addEventListener('mouseup', onUp);
});

Ziehen beendet

Handler über onmouseup setzen und wieder entfernen

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

button.onmousedown = () => console.log('Aufnahme läuft …');
button.onmouseup = () => {
  console.log('Aufnahme gestoppt');
  // Nach dem ersten Mal deaktivieren
  button.onmouseup = null;
};

Aufnahme läuft … Aufnahme gestoppt

Textauswahl nach dem Loslassen auslesen

const artikel = document.querySelector('article');

artikel.addEventListener('mouseup', () => {
  const auswahl = window.getSelection()?.toString().trim();
  if (auswahl) {
    console.log(`Markiert: "${auswahl}"`);
  }
});

Markiert: "JavaScript"

// Wichtig · Fallstricke

Loslassen außerhalb des Elements: Lässt der Nutzer die Taste außerhalb des Elements oder sogar außerhalb des Browserfensters los, bekommt das Element kein mouseup. Bei Drag-Logik lauschst du deshalb auf document oder window oder verwendest Pointer Events mit setPointerCapture().
Touch und Stift: Auf Touch-Geräten erzeugt der Browser mouseup nur als Kompatibilitätsereignis, oft verzögert und nicht bei allen Gesten. Für Eingaben mit Maus, Touch und Stift ist pointerup die bessere Wahl.
Rechte Maustaste: Bei button === 2 öffnet sich je nach Betriebssystem das Kontextmenü, und zwar schon bei mousedown (macOS) oder erst nach mouseup (Windows). Unterdrücken lässt es sich über das Ereignis contextmenu mit preventDefault().
button und buttons: event.button nennt die losgelassene Taste. event.buttons ist eine Bitmaske der Tasten, die danach noch gedrückt sind, und ist nach dem Loslassen der einzigen Taste meist 0.
Deaktivierte Elemente: Auf deaktivierten Formularelementen (disabled) feuern Mausereignisse in vielen Browsern nicht oder uneinheitlich.
Kompatibilität: Wird von allen gängigen Browsern seit Jahren unterstützt. Das Ereignis steigt auf (Bubbling), lässt sich abbrechen und hat die Schnittstelle MouseEvent.

Siehe auch

MouseEvent EventTarget.addEventListener() Element.setPointerCapture() Element: mouseout Element: focusout