Element: pointerdown — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("pointerdown", handler)

Beschreibung

Das Ereignis pointerdown gehört zur Pointer Events API. Es vereint Maus, Touch und Stift in einem einzigen Eingabemodell. Ausgelöst wird es, sobald ein Zeiger in den aktiven Zustand wechselt. Bei der Maus passiert das, wenn von „keine Taste gedrückt“ zu „mindestens eine Taste gedrückt“ gewechselt wird. Bei Touch ist es der Moment, in dem der Finger den Bildschirm berührt, beim Stift der Kontakt mit dem Digitizer.

Man registriert das Ereignis mit element.addEventListener("pointerdown", handler) oder über die Eigenschaft element.onpointerdown = handler. Der Handler bekommt ein PointerEvent. Es hat alle Eigenschaften eines MouseEvent (clientX, button, buttons …) und zusätzlich pointerId, pointerType ("mouse", "pen", "touch"), pressure, width/height, tiltX/tiltY und isPrimary.

Typische Einsatzfälle sind der Beginn von Drag-and-Drop-Interaktionen, Zeichenflächen, Schieberegler, Wischgesten oder eine sofortige visuelle Rückmeldung beim Antippen. Häufig kombiniert man es mit setPointerCapture(). Dann gehen die folgenden pointermove- und pointerup-Ereignisse weiter an dasselbe Element, auch wenn der Zeiger es verlässt.

Das Ereignis steigt im DOM auf (bubbles), lässt sich mit preventDefault() abbrechen und ist composed, überquert also Shadow-DOM-Grenzen. Nach pointerdown folgt normalerweise ein kompatibles mousedown. Dieses wird unterdrückt, wenn man im pointerdown-Handler preventDefault() aufruft.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"pointerdown"`.
$handler Pflicht	(event: PointerEvent) => void		Callback, der ein `PointerEvent` erhält.
$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-Objekt.

Beispiele

Zeigertyp und Position erkennen

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

flaeche.addEventListener('pointerdown', (event) => {
  console.log(`Typ: ${event.pointerType}, ID: ${event.pointerId}`);
  console.log(`Position: ${event.offsetX}/${event.offsetY}, Druck: ${event.pressure}`);
});

Typ: mouse, ID: 1 Position: 120/45, Druck: 0.5

Element ziehen mit Pointer Capture

const box = document.querySelector('.box');
box.style.touchAction = 'none'; // Browser-Scrollen/Zoomen per Touch unterbinden
let start = null;

box.addEventListener('pointerdown', (event) => {
  if (event.button !== 0) return; // nur Primärtaste
  start = { x: event.clientX - box.offsetLeft, y: event.clientY - box.offsetTop };
  box.setPointerCapture(event.pointerId);
});

box.addEventListener('pointermove', (event) => {
  if (!start || !box.hasPointerCapture(event.pointerId)) return;
  box.style.left = `${event.clientX - start.x}px`;
  box.style.top = `${event.clientY - start.y}px`;
});

box.addEventListener('pointerup', () => { start = null; });

on-Property und Entfernen des Listeners

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

// Variante 1: on-Property (nur ein Handler möglich)
button.onpointerdown = () => console.log('Aufnahme startet');
// Handler wieder entfernen
button.onpointerdown = null;

// Variante 2: addEventListener + removeEventListener
const beiDruck = (event) => {
  console.log('Gedrückt mit', event.pointerType);
  button.removeEventListener('pointerdown', beiDruck); // nur einmal reagieren
};
button.addEventListener('pointerdown', beiDruck);

Gedrückt mit touch

Multitouch: aktive Zeiger zählen

const aktiv = new Map();
const canvas = document.querySelector('canvas');
canvas.style.touchAction = 'none';

canvas.addEventListener('pointerdown', (e) => {
  aktiv.set(e.pointerId, { x: e.clientX, y: e.clientY });
  console.log(`Aktive Finger: ${aktiv.size}`);
});

const entfernen = (e) => aktiv.delete(e.pointerId);
canvas.addEventListener('pointerup', entfernen);
canvas.addEventListener('pointercancel', entfernen);

Aktive Finger: 1 Aktive Finger: 2

// Wichtig · Fallstricke

Maus mit mehreren Tasten: Ist bereits eine Maustaste gedrückt und kommt eine zweite hinzu, gibt es kein weiteres pointerdown, sondern ein pointermove mit geänderter Eigenschaft buttons. pointerdown kommt nur beim ersten Tastendruck.
Touch und touch-action: Ohne die CSS-Eigenschaft touch-action: none (oder pan-y o. Ä.) kann der Browser eine Touch-Geste als Scrollen oder Zoomen übernehmen. Dann folgt pointercancel, und es kommen keine weiteren pointermove-Ereignisse mehr. preventDefault() in pointerdown verhindert das Scrollen nicht.
preventDefault: Unterdrückt die kompatiblen Mausereignisse (mousedown, mouseup), aber nicht click. Außerdem kann es Textauswahl und Fokuswechsel verhindern.
Aufräumen: Neben pointerup immer auch pointercancel behandeln, sonst bleiben Zustände hängen, etwa ein Drag, der nie beendet wird.
Barrierefreiheit: Aktionen, die nur über pointerdown ausgelöst werden, erreicht man nicht per Tastatur. Für Schaltflächen ist click meist die bessere Wahl.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Safari seit 13). Ältere iOS-Versionen brauchen einen Fallback auf touchstart.

Siehe auch

Element: pointermove Element: pointerout Element: pointerover Element: pointerup Element: mousedown