Element: mousedown — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("mousedown", handler)

Beschreibung

Das mousedown-Ereignis tritt im Moment des Drückens einer Maustaste auf, also noch vor mouseup und click. Die Reihenfolge ist immer mousedown → mouseup → click (bei Doppelklick zusätzlich dblclick). Das Ereignis wird für jede Taste ausgelöst, also auch für die mittlere und die rechte Maustaste. Welche Taste gedrückt wurde, steht in event.button.

Das Ereignis wird als MouseEvent übergeben, steigt im DOM auf (Bubbling) und lässt sich abbrechen. Registriert wird es mit element.addEventListener("mousedown", handler) oder über die Eigenschaft element.onmousedown = handler. Mit addEventListener sind mehrere Handler möglich, bei der on-Eigenschaft ersetzt jede neue Zuweisung die vorherige.

Typische Einsatzfälle sind der Start von Drag-Operationen (Ziehen, Auswahlrechtecke, Schieberegler), Zeichenflächen, sofortiges Feedback beim Drücken und das Verhindern von Textauswahl oder Fokuswechsel. Mit event.preventDefault() unterdrückt man die Standardaktionen des Browsers, etwa das Starten einer Textauswahl, natives Drag & Drop oder den Fokuswechsel auf das angeklickte Element.

Für neue Projekte, die auch Touch- und Stifteingaben abdecken sollen, ist oft pointerdown die bessere Wahl. Pointer Events vereinheitlichen alle Eingabearten und bieten mit setPointerCapture() eine saubere Zeiger-Erfassung.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"mousedown"`.
$handler Pflicht	(event: MouseEvent) => void		Callback, der ein `MouseEvent` erhält. Wichtige Eigenschaften: `button` (0 = links, 1 = Mitte, 2 = rechts, 3/4 = Zurück/Vor), `buttons` (Bitmaske aller gedrückten Tasten), `clientX`/`clientY`, `offsetX`/`offsetY`, `detail` (Anzahl der Klicks), `shiftKey`, `ctrlKey`, `altKey` und `metaKey`.
$options	boolean \| { capture?: boolean, once?: boolean, passive?: boolean, signal?: AbortSignal }	false	Optionen für die Registrierung. Mit `signal` lässt sich der Listener über einen `AbortController` entfernen. Bei `passive: true` hat `preventDefault()` keine Wirkung.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Aus dem Handler heraus kann event.preventDefault() die Standardaktion verhindern.

Beispiele

Gedrückte Taste erkennen

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

const tastenNamen = ['links', 'Mitte', 'rechts', 'Zurück', 'Vor'];

box.addEventListener('mousedown', (event) => {
  const name = tastenNamen[event.button] ?? `unbekannt (${event.button})`;
  console.log(`Taste gedrückt: ${name} bei (${event.offsetX}, ${event.offsetY})`);
});

Taste gedrückt: links bei (42, 17)

Element ziehen: mousedown startet, mouseup beendet

const karte = document.querySelector('.karte');
karte.style.position = 'absolute';

karte.addEventListener('mousedown', (event) => {
  if (event.button !== 0) return; // nur die linke Taste
  event.preventDefault();         // keine Textauswahl, kein natives Drag

  const startX = event.clientX - karte.offsetLeft;
  const startY = event.clientY - karte.offsetTop;

  const onMove = (e) => {
    karte.style.left = `${e.clientX - startX}px`;
    karte.style.top = `${e.clientY - startY}px`;
  };

  const onUp = () => {
    // Listener am Dokument wieder entfernen
    document.removeEventListener('mousemove', onMove);
    document.removeEventListener('mouseup', onUp);
    console.log('Ziehen beendet');
  };

  // Am document registrieren, damit das Ziehen auch außerhalb der Karte weiterläuft
  document.addEventListener('mousemove', onMove);
  document.addEventListener('mouseup', onUp);
});

Ziehen beendet

on-Eigenschaft und Fokusverlust verhindern

const input = document.querySelector('#suche');
const toolbarButton = document.querySelector('#fett');

// preventDefault bei mousedown sorgt dafür, dass das Eingabefeld den Fokus behält
toolbarButton.onmousedown = (event) => {
  event.preventDefault();
};

toolbarButton.onclick = () => {
  console.log('Fokus noch im Eingabefeld:', document.activeElement === input);
};

// Handler wieder entfernen:
// toolbarButton.onmousedown = null;

Fokus noch im Eingabefeld: true

Einmaliger Listener mit AbortController

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

flaeche.addEventListener('mousedown', (event) => {
  console.log('Strich beginnt bei', event.clientX, event.clientY);
}, { signal: controller.signal });

// Später, z. B. beim Verlassen des Zeichenmodus:
document.querySelector('#fertig').addEventListener('click', () => {
  controller.abort(); // entfernt den mousedown-Listener
  console.log('Zeichenmodus beendet');
});

Strich beginnt bei 120 80 Zeichenmodus beendet

// Wichtig · Fallstricke

button und buttons nicht verwechseln: button gibt die Taste an, die dieses Ereignis ausgelöst hat (0 = links). buttons ist eine Bitmaske aller gerade gedrückten Tasten (1 = links, 2 = rechts, 4 = Mitte). Die Werte für rechts und Mitte sind in den beiden Eigenschaften vertauscht.
Rechtsklick: mousedown wird auch für die rechte Taste ausgelöst. Wer nur auf die linke Taste reagieren will, muss event.button === 0 prüfen. Um das Kontextmenü zu unterdrücken, reicht mousedown nicht aus, dafür braucht man contextmenu mit preventDefault().
Ziehen: mousemove und mouseup sollte man am document registrieren, nicht am Element selbst. Sonst bleibt das Ziehen „hängen“, wenn der Zeiger das Element verlässt oder die Taste außerhalb des Fensters losgelassen wird.
Standardaktionen: preventDefault() bei mousedown verhindert Textauswahl, natives Drag & Drop und den Fokuswechsel. Es unterdrückt aber nicht das spätere click-Ereignis.
Touch-Geräte: Auf Touchscreens erzeugen Browser oft nur nachträglich simulierte Mausereignisse, manchmal verzögert oder gar nicht, wenn touchstart abgebrochen wird. Für alle Eingabearten zusammen ist pointerdown besser geeignet.
Deaktivierte Elemente: Auf disabled-Formularelementen wird mousedown in vielen Browsern nicht ausgelöst.
Barrierefreiheit: Aktionen, die nur über mousedown erreichbar sind, lassen sich per Tastatur nicht auslösen. Für normale Bedienelemente sollte man click verwenden, das auch bei Enter und Leertaste feuert.
Kompatibilität: Wird von allen Browsern seit langem unterstützt. Die Optionen passive, once und signal gibt es nur in modernen Browsern.

Siehe auch

MouseEvent EventTarget.addEventListener() Event.preventDefault() Element: mousemove Element: mouseout