Element: dblclick — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("dblclick", handler)

Beschreibung

Das dblclick-Event wird auf einem Element ausgelöst, wenn der Benutzer die primäre Taste eines Zeigegeräts zweimal kurz hintereinander auf demselben Element drückt und loslässt. Wie kurz „kurz“ ist, legt das Betriebssystem bzw. der Benutzer in den Systemeinstellungen fest – eine feste Grenze in Millisekunden gibt es nicht.

Das Event ist vom Typ MouseEvent und liefert daher Koordinaten (clientX, clientY, offsetX …), Zusatztasten (shiftKey, ctrlKey, altKey, metaKey) und über detail die Klickanzahl (bei dblclick in der Regel 2). Es steigt auf (bubbles) und ist abbrechbar (cancelable).

Die Reihenfolge der Events bei einem Doppelklick lautet: mousedown → mouseup → click → mousedown → mouseup → click → dblclick. Jeder Doppelklick löst also auch zwei click-Events aus – das muss man berücksichtigen, wenn auf einem Element sowohl Einfach- als auch Doppelklick unterschiedliche Aktionen haben sollen.

Typische Einsatzzwecke sind Inline-Bearbeitung (Doppelklick auf Text öffnet ein Eingabefeld), das Öffnen von Einträgen in Datei- oder Listenansichten, Zoomen in Karten oder Bildern sowie Vollbild-Umschaltung bei Videos. Registrieren lässt sich der Handler per addEventListener("dblclick", …) oder über die Eigenschaft ondblclick.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Event-Name `"dblclick"`.
$handler Pflicht	(event: MouseEvent) => void \| EventListenerObject		Callback, der ein `MouseEvent` erhält – u. a. mit `target`, `clientX`/`clientY`, `detail` und Zusatztasten.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `passive`, `capture` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein MouseEvent; sein Rückgabewert wird ignoriert (Abbruch nur über event.preventDefault()).

Beispiele

Inline-Bearbeitung per Doppelklick

const label = document.querySelector('#todo-title');

label.addEventListener('dblclick', () => {
  const input = document.createElement('input');
  input.value = label.textContent;
  label.replaceWith(input);
  input.focus();
  input.select();

  const speichern = () => {
    label.textContent = input.value.trim() || label.textContent;
    input.replaceWith(label);
  };

  input.addEventListener('blur', speichern, { once: true });
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') input.blur();
  });
});

Über die ondblclick-Eigenschaft und wieder entfernen

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

box.ondblclick = (event) => {
  console.log(`Doppelklick bei x=${event.offsetX}, y=${event.offsetY}, detail=${event.detail}`);
  box.classList.toggle('vergroessert');
};

// Handler entfernen
setTimeout(() => {
  box.ondblclick = null;
}, 10_000);

Doppelklick bei x=42, y=17, detail=2

Event-Delegation mit removeEventListener

const liste = document.querySelector('#dateien');

const oeffnen = (event) => {
  const eintrag = event.target.closest('li[data-id]');
  if (!eintrag) return;
  console.log('Öffne Datei', eintrag.dataset.id);
};

liste.addEventListener('dblclick', oeffnen);

// Später, z. B. beim Abbau der Ansicht:
liste.removeEventListener('dblclick', oeffnen);

Öffne Datei 7

Einfach- und Doppelklick sauber unterscheiden

const karte = document.querySelector('#karte');
let timer = null;

karte.addEventListener('click', (e) => {
  if (e.detail > 1) return; // zweiten click eines Doppelklicks ignorieren
  timer = setTimeout(() => console.log('Einfachklick: Marker auswählen'), 250);
});

karte.addEventListener('dblclick', (e) => {
  clearTimeout(timer);
  e.preventDefault();
  console.log('Doppelklick: hineinzoomen');
});

Doppelklick: hineinzoomen

// Wichtig · Fallstricke

Doppelte click-Events: Vor jedem dblclick feuern zwei click-Events. Wer beides unterscheiden will, muss den Einfachklick verzögern (siehe Beispiel) – das macht Einfachklicks spürbar träger.
Textauswahl: Standardmäßig markiert ein Doppelklick ein Wort. preventDefault() im dblclick-Handler verhindert das nicht zuverlässig, weil die Auswahl schon beim mousedown entsteht. Abhilfe: user-select: none per CSS oder preventDefault() im mousedown-Handler bei event.detail > 1.
Touch-Geräte: Auf Mobilgeräten wird dblclick nicht überall zuverlässig ausgelöst bzw. vom Doppeltipp-Zoom überlagert. Für plattformübergreifende Gesten lieber pointerup mit eigener Zeitmessung nutzen.
Barrierefreiheit: Doppelklick ist per Tastatur nicht erreichbar. Wichtige Aktionen zusätzlich über Tastatur (z. B. Enter/F2) oder einen Button anbieten.
Die Zeitschwelle hängt von den Systemeinstellungen ab und ist aus JavaScript nicht auslesbar.
Kompatibilität: in allen Browsern seit langem unterstützt; ondblclick ist auf allen HTML-Elementen, document und window verfügbar.

Siehe auch

MouseEvent Element: auxclick Element: click Element: blur Element: copy