Element: pointerout — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("pointerout", handler)

Beschreibung

Das Ereignis pointerout gehört zu den Pointer Events und ist das zeigerunabhängige Gegenstück zu mouseout. Es wird ausgelöst, wenn:

der Zeiger (Maus, Stift, Finger) den Trefferbereich (Hit-Test) eines Elements verlässt – auch beim Wechsel in ein Kindelement,
nach pointerup bei Geräten ohne Hover-Unterstützung (z. B. Touch), weil der Zeiger danach „verschwindet“,
nach pointercancel, etwa wenn der Browser eine Touch-Geste für Scrollen übernimmt,
ein Stift den Erkennungsbereich des Digitalisierers verlässt.

Im Gegensatz zu pointerleave blubbert pointerout (bubbles: true) und ist abbrechbar. Dadurch eignet es sich gut für Event-Delegation: Ein einziger Listener auf einem Container reicht aus, um das Verlassen beliebig vieler Kindelemente zu verarbeiten. Über event.relatedTarget erfahren Sie, welches Element der Zeiger betreten hat (oder null, wenn er das Dokument verlassen hat).

Der Handler erhält ein PointerEvent-Objekt mit Eigenschaften wie pointerId, pointerType ("mouse", "pen", "touch"), clientX/clientY und relatedTarget. Alternativ lässt sich der Handler über die Eigenschaft element.onpointerout zuweisen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"pointerout"`.
$handler Pflicht	(event: PointerEvent) => void \| EventListenerObject		Callback, der bei jedem Auslösen mit einem `PointerEvent` aufgerufen wird.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `capture`, `once`, `passive` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener liefert undefined. Der Handler erhält ein PointerEvent.

Beispiele

Hervorhebung per addEventListener entfernen

const card = document.querySelector('.card');

card.addEventListener('pointerover', () => card.classList.add('aktiv'));

card.addEventListener('pointerout', (event) => {
  // Wechsel in ein Kindelement ignorieren
  if (card.contains(event.relatedTarget)) return;
  card.classList.remove('aktiv');
  console.log(`Verlassen mit: ${event.pointerType}`);
});

Verlassen mit: mouse

Event-Delegation für Tabellenzeilen

const tbody = document.querySelector('#daten tbody');

tbody.addEventListener('pointerout', (event) => {
  const row = event.target.closest('tr');
  if (!row || row.contains(event.relatedTarget)) return;
  row.classList.remove('hover');
  console.log(`Zeile ${row.rowIndex} verlassen`);
});

Zeile 3 verlassen

on-Property und Entfernen des Listeners

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

// Variante 1: on-Property
button.onpointerout = () => { tooltip.hidden = true; };

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

// Später, z. B. beim Deaktivieren der Komponente:
button.removeEventListener('pointerout', hideTooltip);
button.onpointerout = null;

Entfernen per AbortController

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

area.addEventListener('pointerout', (e) => {
  console.log('Zeiger', e.pointerId, 'hat die Fläche verlassen');
}, { signal: controller.signal });

// Alle mit diesem Signal registrierten Listener entfernen
controller.abort();

Zeiger 1 hat die Fläche verlassen

// Wichtig · Fallstricke

Blubbern: pointerout feuert auch, wenn der Zeiger vom Element in ein Kindelement wechselt. Wer nur das echte Verlassen erkennen will, prüft element.contains(event.relatedTarget) oder verwendet pointerleave.
Touch-Geräte: Nach jedem pointerup folgt sofort pointerout und pointerleave, da es keinen Hover-Zustand gibt. Hover-Logik sollte daher event.pointerType berücksichtigen.
Pointer Capture: Solange per setPointerCapture() ein Zeiger gebunden ist, wird pointerout erst nach lostpointercapture an andere Elemente ausgelöst.
Scroll-Gesten: Übernimmt der Browser eine Touch-Geste (pointercancel), wird ebenfalls pointerout ausgelöst; mit CSS touch-action: none lässt sich das verhindern.
Kompatibilität: In allen aktuellen Browsern unterstützt (Safari ab 13). Für sehr alte Browser ggf. auf mouseout/touchend zurückfallen. Kompatibilitäts-Mausereignisse (mouseout) werden zusätzlich ausgelöst.

Siehe auch

PointerEvent Element.setPointerCapture() Element: pointerup Element: pointerdown Element: pointermove