Element: pointerover — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("pointerover", handler)

Beschreibung

Das Ereignis pointerover gehört zu den Pointer Events. Es wird ausgelöst, sobald ein Zeiger in den Bereich eines Elements eintritt. Maus, Stift und Touch werden dabei einheitlich behandelt. Der Handler bekommt ein PointerEvent mit Angaben wie pointerId, pointerType, pressure oder width/height. Man registriert ihn mit addEventListener("pointerover", …) oder über die Eigenschaft onpointerover.

Anders als pointerenter steigt pointerover im DOM-Baum auf (bubbles) und lässt sich abbrechen (cancelable). Das Ereignis feuert also auch dann erneut, wenn der Zeiger von einem Elternelement auf ein Kindelement wechselt. Deshalb eignet es sich gut für Event-Delegation: Ein einziger Listener auf einem Container reicht, um Hover-Effekte für viele Kindelemente zu steuern. Welches Element tatsächlich betreten wurde, steht in event.target. Das Element, das der Zeiger gerade verlassen hat, steht in event.relatedTarget.

Die Reihenfolge beim Betreten eines Elements ist: pointerover → pointerenter → danach die Kompatibilitätsereignisse mouseover → mouseenter. Das Gegenstück ist pointerout. Bei Touch-Geräten wird pointerover direkt vor pointerdown ausgelöst, weil der Finger erst beim Berühren „eintritt“.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"pointerover"`.
$handler Pflicht	(event: PointerEvent) => void		Callback-Funktion, die ein `PointerEvent` erhält (mit `target`, `relatedTarget`, `pointerType`, `pointerId` usw.).
$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 bekommt ein PointerEvent (bubbles: true, cancelable: true).

Beispiele

Hover-Hervorhebung mit addEventListener

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

const onOver = (event) => {
  card.classList.add('is-hovered');
  console.log(`Zeiger (${event.pointerType}) über`, event.target.tagName);
};

card.addEventListener('pointerover', onOver);
card.addEventListener('pointerout', () => card.classList.remove('is-hovered'));

// Später wieder entfernen
// card.removeEventListener('pointerover', onOver);

Zeiger (mouse) über DIV

Event-Delegation für eine Tabelle

const table = document.querySelector('#products');

table.addEventListener('pointerover', (event) => {
  const row = event.target.closest('tr');
  if (!row || !table.contains(row)) return;

  // Nur reagieren, wenn wir wirklich eine neue Zeile betreten
  if (event.relatedTarget && row.contains(event.relatedTarget)) return;

  row.classList.add('highlight');
  console.log('Zeile betreten:', row.dataset.id);
});

table.addEventListener('pointerout', (event) => {
  const row = event.target.closest('tr');
  if (!row || (event.relatedTarget && row.contains(event.relatedTarget))) return;
  row.classList.remove('highlight');
});

Zeile betreten: 42

on-Property und Entfernen per AbortController

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

// Variante 1: on-Property (nur ein Handler möglich)
button.onpointerover = (e) => {
  if (e.pointerType === 'touch') return; // Tooltip nur bei Maus/Stift
  button.title = 'Hilfe öffnen';
};

// Variante 2: mehrere Listener gemeinsam abmelden
const controller = new AbortController();
button.addEventListener('pointerover', () => console.log('over'), {
  signal: controller.signal
});

// Handler entfernen
controller.abort();
button.onpointerover = null;

// Wichtig · Fallstricke

Bubbling-Falle: pointerover feuert bei jedem Wechsel auf ein Kindelement erneut. Wer nur das Betreten des Elements selbst braucht, nimmt pointerenter oder filtert über event.relatedTarget und contains().
Für reine Hover-Optik ist CSS :hover meist einfacher und schneller. pointerover lohnt sich, wenn Logik nötig ist, etwa Tooltips, Vorladen von Daten oder Analysen.
Touch: Auf Touch-Geräten gibt es kein echtes Hover. pointerover kommt dort erst unmittelbar vor pointerdown. Wichtige Funktionen sollten nicht nur über Hover erreichbar sein, das gilt auch für die Barrierefreiheit.
Bei aktiver Zeigererfassung mit setPointerCapture() werden Over-/Out-Ereignisse nur noch für das erfassende Element ausgelöst.
event.relatedTarget kann null sein, zum Beispiel wenn der Zeiger von außerhalb des Fensters kommt.
Kompatibilität: Wird von allen modernen Browsern unterstützt: Chrome 55+, Firefox 59+, Safari 13+, Edge. Für sehr alte Safari-Versionen braucht man als Ersatz mouseover.

Siehe auch

PointerEvent EventTarget.addEventListener() Element: pointermove Element: pointerenter Element: pointerout