Element: mouseleave — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("mouseleave", handler)

Beschreibung

Das Ereignis mouseleave wird ausgelöst, sobald der Zeiger eines Zeigegeräts den Bereich eines Elements und aller seiner Nachfahren verlässt. Registrieren lässt es sich mit element.addEventListener("mouseleave", handler) oder über die Eigenschaft element.onmouseleave = handler. Das Ereignisobjekt ist ein MouseEvent.

Im Unterschied zu mouseout steigt mouseleave nicht auf (kein Bubbling). Wenn der Zeiger innerhalb eines Elements von einem Kindelement zum nächsten wandert, wird es auch nicht ausgelöst. Deshalb passt es gut für Hover-Logik wie Tooltips, Dropdown-Menüs, Vorschaukarten oder das Anhalten von Animationen. Anders als bei mouseout muss man hier kein relatedTarget prüfen, um Fehlauslösungen herauszufiltern.

Verlässt der Zeiger ein verschachteltes Element, bekommt jedes verlassene Element in der Hierarchie ein eigenes mouseleave-Ereignis, zuerst das innerste. Das Gegenstück ist mouseenter. Wenn Maus, Stift und Touch einheitlich behandelt werden sollen, ist pointerleave die modernere Wahl.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier `"mouseleave"`.
$handler Pflicht	(event: MouseEvent) => void		Callback, der ein `MouseEvent` erhält. Nützliche Eigenschaften sind `clientX`/`clientY`, `relatedTarget` (das Element, auf das der Zeiger gewechselt ist, oder `null`) und `buttons`.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `signal` oder `capture`. `passive` ist hier bedeutungslos, weil sich das Ereignis nicht abbrechen lässt.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Das Ereignis selbst ist nicht abbrechbar (cancelable: false) und steigt nicht auf (bubbles: false).

Beispiele

Tooltip beim Verlassen ausblenden

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

button.addEventListener('mouseenter', () => {
  tooltip.hidden = false;
});

button.addEventListener('mouseleave', (event) => {
  tooltip.hidden = true;
  console.log('Verlassen Richtung:', event.relatedTarget?.tagName ?? 'außerhalb des Fensters');
});

Verlassen Richtung: BODY

Dropdown mit Verzögerung schließen (on-Property)

const menu = document.querySelector('.dropdown');
let closeTimer = null;

menu.onmouseenter = () => {
  clearTimeout(closeTimer);
  menu.classList.add('offen');
};

// Kinder-Elemente lösen kein mouseleave aus – kein Flackern
menu.onmouseleave = () => {
  closeTimer = setTimeout(() => menu.classList.remove('offen'), 300);
};

Listener wieder entfernen

const karte = document.querySelector('.vorschau');

const beimVerlassen = () => {
  console.log('Vorschau verlassen');
  karte.classList.remove('aktiv');
};

karte.addEventListener('mouseleave', beimVerlassen);

// Später, z. B. wenn die Komponente zerstört wird:
karte.removeEventListener('mouseleave', beimVerlassen);

// Alternative: nur einmal reagieren
karte.addEventListener('mouseleave', () => console.log('Erstes Verlassen'), { once: true });

Erstes Verlassen

mouseleave vs. mouseout im Vergleich

const box = document.querySelector('.box'); // enthält mehrere Kind-Elemente

box.addEventListener('mouseout', () => console.log('mouseout'));
box.addEventListener('mouseleave', () => console.log('mouseleave'));

// Zeiger wandert von Kind A zu Kind B und dann aus der Box heraus:

mouseout mouseout mouseout mouseleave

// Wichtig · Fallstricke

Kein Bubbling: Event-Delegation über ein Elternelement klappt mit mouseleave nicht direkt. Entweder setzt man capture: true ein und prüft event.target, oder man verwendet mouseout und prüft relatedTarget mit contains().
Touch-Geräte: Auf Touchscreens wird mouseleave nur emuliert und oft erst ausgelöst, wenn man woanders hintippt. Kritische Funktionen sollten also nicht allein von Hover abhängen. Für alle Eingabearten ist pointerleave besser geeignet.
DOM-Änderungen: Wird das Element unter dem Zeiger entfernt oder verschoben, verhalten sich die Browser unterschiedlich. Manche lösen mouseleave dann erst bei der nächsten Mausbewegung aus, andere gar nicht.
Wenn der Zeiger das Browserfenster verlässt, ist relatedTarget null.
Mit disabled deaktivierte Formularelemente lösen in einigen älteren Browsern keine Mausereignisse aus.
Kompatibilität: Das Ereignis wird von allen modernen Browsern unterstützt. Ursprünglich stammt es aus dem Internet Explorer, in Chrome gibt es es seit Version 30.
Rein optische Hover-Effekte lassen sich mit CSS :hover meist einfacher und schneller umsetzen.

Siehe auch

Element: mouseenter Element: mouseout Element: mouseover Element: pointerleave MouseEvent MouseEvent.relatedTarget EventTarget.addEventListener()