Element: pointerenter — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("pointerenter", handler)

Beschreibung

Das Ereignis pointerenter wird ausgelöst, wenn ein Zeigegerät in die Hit-Test-Grenzen eines Elements oder eines seiner Nachkommen hineinbewegt wird. Es wird außerdem ausgelöst, wenn ein Gerät ohne Hover-Fähigkeit (z. B. Finger oder Stift auf einem Touchscreen) mit einem pointerdown das Element direkt berührt. Das Ereignis ist ein PointerEvent und vereint Maus-, Stift- und Touch-Eingaben in einem einzigen Modell.

Im Gegensatz zu pointerover steigt pointerenter nicht auf (kein Bubbling) und wird nicht erneut ausgelöst, wenn der Zeiger zwischen Kindelementen wechselt. Das macht es ideal für Hover-Effekte, Tooltips oder Vorschau-Karten, bei denen nur das Betreten des gesamten Elements zählt. Wird der Zeiger in ein verschachteltes Element bewegt, erhält jedes Element der Hierarchie, das neu betreten wird, ein eigenes pointerenter, beginnend beim äußersten.

Registrieren lässt sich der Handler über element.addEventListener("pointerenter", handler) oder über die Eigenschaft element.onpointerenter = handler. Das Gegenstück ist pointerleave. Über event.pointerType ("mouse", "pen", "touch") kann man gerätespezifisch reagieren.

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

Hover-Hervorhebung mit addEventListener

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

card.addEventListener('pointerenter', (event) => {
  card.classList.add('is-hovered');
  console.log(`Betreten mit: ${event.pointerType}`);
});

card.addEventListener('pointerleave', () => {
  card.classList.remove('is-hovered');
});

Betreten mit: mouse

Tooltip nur für Maus und Stift, per AbortController entfernbar

const button = document.querySelector('#save');
const tooltip = document.querySelector('#tooltip');
const controller = new AbortController();

button.addEventListener('pointerenter', (event) => {
  if (event.pointerType === 'touch') return; // Touch hat kein echtes Hover
  tooltip.hidden = false;
  tooltip.style.left = `${event.clientX + 12}px`;
  tooltip.style.top = `${event.clientY + 12}px`;
}, { signal: controller.signal });

button.addEventListener('pointerleave', () => {
  tooltip.hidden = true;
}, { signal: controller.signal });

// Später: beide Listener auf einmal entfernen
// controller.abort();

on-Property und removeEventListener

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

// Variante 1: on-Property (nur ein Handler möglich)
box.onpointerenter = () => console.log('onpointerenter ausgelöst');

// Variante 2: benannter Handler, der sich nach 3 Aufrufen entfernt
let count = 0;
const onEnter = () => {
  count += 1;
  console.log(`Eintritt Nr. ${count}`);
  if (count === 3) box.removeEventListener('pointerenter', onEnter);
};
box.addEventListener('pointerenter', onEnter);

// Handler der on-Property entfernen
// box.onpointerenter = null;

onpointerenter ausgelöst Eintritt Nr. 1

Unterschied zu pointerover bei verschachtelten Elementen

const list = document.querySelector('ul');

list.addEventListener('pointerenter', () => console.log('enter: ul'));
list.addEventListener('pointerover', (e) => console.log(`over: ${e.target.tagName}`));

// Zeiger fährt in die Liste und dann über zwei <li>-Einträge:
// pointerenter feuert nur einmal, pointerover bei jedem Kindwechsel.

over: UL enter: ul over: LI over: LI

// Wichtig · Fallstricke

Kein Bubbling: Event-Delegation über ein Elternelement funktioniert mit pointerenter nur in der Capture-Phase ({ capture: true }). Für Delegation eignet sich meist pointerover besser.
Touch-Geräte: Ohne Hover-Fähigkeit wird pointerenter erst beim Berühren (direkt vor pointerdown) ausgelöst und nach pointerup folgt sofort pointerleave. Hover-Menüs sind so auf Touch schwer bedienbar – immer eine Klick-/Tap-Alternative anbieten.
Pointer Capture: Hat ein Element per setPointerCapture() den Zeiger eingefangen, erhalten andere Elemente während des Captures keine pointerenter-Ereignisse.
Reihenfolge: Typisch ist pointerover → pointerenter → mouseover → mouseenter. Werden Maus- und Pointer-Ereignisse gemischt verarbeitet, kann der Handler doppelt laufen.
Barrierefreiheit: Hover allein erreicht keine Tastaturnutzer – ergänzend focus/focusin behandeln. Für reine Optik ist CSS :hover oft einfacher und performanter.
Kompatibilität: Unterstützt in allen aktuellen Browsern (Chrome 55+, Firefox 59+, Safari 13+, Edge). Sehr alte Safari-Versionen benötigen ggf. mouseenter als Rückfall.

Siehe auch

pointerleave pointerover pointerout pointerdown mouseenter PointerEvent Element.setPointerCapture() EventTarget.addEventListener()