Element: mouseout — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("mouseout", handler)

Beschreibung

Das Ereignis mouseout wird an einem Element ausgelöst, wenn ein Zeigegerät (meist eine Maus) den Zeiger aus dem Element hinausbewegt. Es feuert aber auch dann, wenn der Zeiger in ein Kindelement wechselt, denn das Kind verdeckt die sichtbare Fläche des Elternelements. Der Handler bekommt ein MouseEvent. Über event.relatedTarget erfährt man, welches Element der Zeiger gerade betreten hat.

Anders als mouseleave steigt mouseout im DOM auf (Bubbling). Deshalb eignet es sich gut für Ereignis-Delegation: Ein einziger Listener an einem Container kann den Hover-Zustand vieler Kindelemente steuern, zum Beispiel für Tabellenzeilen, Menüeinträge oder Kacheln.

Sie können den Handler auf zwei Wegen registrieren: mit addEventListener("mouseout", handler) oder über die Eigenschaft element.onmouseout = handler. Die Eigenschaft hält immer nur einen Handler. Mit addEventListener sind mehrere Handler möglich, die Sie mit removeEventListener gezielt wieder entfernen können.

Brauchen Sie nur das Verlassen des gesamten Elements samt Kindern, ist mouseleave meist die bessere Wahl. Wenn Sie mouseout verwenden, filtern Sie mit relatedTarget und element.contains().

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignistyp, hier `"mouseout"`.
$handler Pflicht	(event: MouseEvent) => void		Die Rückruffunktion. Sie erhält ein `MouseEvent` mit u. a. `target` (verlassenes Element), `relatedTarget` (betretenes Element oder `null`), `clientX`/`clientY`, `buttons` und den Modifikatortasten (`shiftKey`, `ctrlKey` …).
$options	boolean \| { capture?: boolean, once?: boolean, passive?: boolean, signal?: AbortSignal }	false	Optionale Einstellungen für `addEventListener`, z. B. `once: true` für einen einmaligen Aufruf oder `signal`, um den Listener per `AbortController` zu entfernen.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein MouseEvent, das im DOM aufsteigt und abbrechbar ist (bubbles: true, cancelable: true).

Beispiele

Hover-Hervorhebung entfernen (addEventListener)

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

box.addEventListener('mouseover', () => box.classList.add('aktiv'));
box.addEventListener('mouseout', (event) => {
  // Wechsel in ein Kindelement ignorieren
  if (box.contains(event.relatedTarget)) return;
  box.classList.remove('aktiv');
  console.log('Box verlassen, neues Ziel:', event.relatedTarget?.tagName ?? 'außerhalb des Fensters');
});

Box verlassen, neues Ziel: BODY

Ereignis-Delegation für Tabellenzeilen

const tabelle = document.querySelector('table');

tabelle.addEventListener('mouseover', (e) => {
  e.target.closest('tr')?.classList.add('hover');
});

tabelle.addEventListener('mouseout', (e) => {
  const zeile = e.target.closest('tr');
  // Nur entfernen, wenn die Zeile wirklich verlassen wird
  if (zeile && !zeile.contains(e.relatedTarget)) {
    zeile.classList.remove('hover');
  }
});

onmouseout-Eigenschaft und Entfernen des Listeners

const button = document.querySelector('#hilfe');
const tooltip = document.querySelector('#tooltip');

// Variante 1: on-Property (überschreibt einen früheren Handler)
button.onmouseout = () => { tooltip.hidden = true; };

// Variante 2: benannter Handler, später wieder entfernbar
const verstecken = () => { tooltip.hidden = true; };
button.addEventListener('mouseout', verstecken);

// Später, z. B. wenn der Tooltip dauerhaft sichtbar bleiben soll:
button.removeEventListener('mouseout', verstecken);
button.onmouseout = null;

Listener per AbortController aufräumen

const controller = new AbortController();
const karte = document.querySelector('.karte');

karte.addEventListener('mouseout', (e) => {
  console.log(`Verlassen bei x=${e.clientX}, y=${e.clientY}`);
}, { signal: controller.signal });

// Entfernt alle mit diesem Signal registrierten Listener
setTimeout(() => controller.abort(), 10000);

Verlassen bei x=312, y=148

// Wichtig · Fallstricke

Feuert auch beim Wechsel in Kindelemente: Bewegt sich der Zeiger vom Elternelement in ein Kind, löst das Elternelement mouseout aus. Unmittelbar danach steigt das mouseover des Kindes auf. Das führt schnell zu Flackern. Filtern Sie deshalb mit element.contains(event.relatedTarget) oder nehmen Sie mouseleave.
Aufsteigen im DOM: Auch ein mouseout von tief verschachtelten Kindern landet beim Elternelement. event.target ist dann das Kind, nicht das Element mit dem Listener. Das Element mit dem Listener finden Sie in event.currentTarget.
relatedTarget kann null sein, etwa wenn der Zeiger das Browserfenster verlässt oder das Zielelement inzwischen aus dem DOM entfernt wurde.
Schnelle Bewegungen: Der Browser prüft die Zeigerposition nur in Abständen. Bei schnellen Bewegungen werden dazwischenliegende Elemente übersprungen, und nicht jedes Element bekommt ein Ereignispaar aus mouseover und mouseout.
Touch-Geräte: Auf Touchscreens wird mouseout nur emuliert und oft unzuverlässig ausgelöst, typischerweise erst beim Antippen eines anderen Elements. Für Maus, Stift und Touch zusammen eignet sich pointerout bzw. pointerleave.
Deaktivierte Formularelemente (disabled) lösen in manchen Browsern keine Mausereignisse aus.
Für reine Darstellungseffekte ist die CSS-Pseudoklasse :hover meist einfacher und schneller als JavaScript.
Kompatibilität: wird seit jeher von allen gängigen Browsern unterstützt (Baseline).

Siehe auch

Element: mouseover Element: mouseleave Element: mouseenter Element: pointerout MouseEvent.relatedTarget MouseEvent EventTarget.addEventListener() Node.contains()