HTMLElement.click() — Methode · JavaScript-Referenz

Signatur

HTMLElement.prototype.click()

Beschreibung

click() löst auf dem Element ein synthetisches click-Event aus. Es ist ein PointerEvent (in älteren Browsern ein MouseEvent) mit bubbles: true und cancelable: true. Das Event steigt also wie ein echter Klick durch den DOM-Baum auf und löst alle registrierten Handler aus. Die Standardaktion läuft ebenfalls ab: Eine Checkbox wird umgeschaltet, ein Link folgt seinem href und ein Submit-Button schickt sein Formular ab.

Typische Einsätze sind:

ein verstecktes <input type="file"> über einen eigenen, gestalteten Button öffnen,
einen Download über einen per Code erzeugten <a download>-Link starten,
Tastenkürzel an vorhandene Buttons weiterleiten,
Klicks in Tests simulieren.

Die Methode ruft die Handler synchron auf: Wenn click() zurückkehrt, sind alle Listener bereits gelaufen. Bei deaktivierten Formular-Elementen (disabled) passiert nichts. Wenn Sie die Event-Eigenschaften selbst festlegen wollen, zum Beispiel Koordinaten oder Zusatztasten, erzeugen Sie stattdessen ein eigenes MouseEvent und senden es mit dispatchEvent().

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Verstecktes Datei-Eingabefeld über eigenen Button öffnen

// HTML: <input type="file" id="upload" hidden> <button id="pick">Datei wählen</button>
const fileInput = document.querySelector('#upload');
const pickButton = document.querySelector('#pick');

pickButton.addEventListener('click', () => {
  fileInput.click(); // öffnet den Datei-Dialog
});

fileInput.addEventListener('change', () => {
  const [file] = fileInput.files;
  if (file) console.log(`Ausgewählt: ${file.name}`);
});

Ausgewählt: bericht.pdf

Download einer generierten Datei auslösen

const downloadJson = (data, filename) => {
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.append(link);
  link.click();
  link.remove();
  URL.revokeObjectURL(url);
};

downloadJson({ user: 'anna', score: 42 }, 'export.json');

Synchroner Ablauf und Checkbox umschalten

const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
document.body.append(checkbox);

checkbox.addEventListener('click', (event) => {
  console.log('Handler:', event.type, event.bubbles, checked());
});
const checked = () => checkbox.checked;

console.log('vorher:', checkbox.checked);
checkbox.click();
console.log('nachher:', checkbox.checked);

vorher: false Handler: click true true nachher: true

Tastenkürzel an einen Button weiterleiten

const saveButton = document.querySelector('#save');

document.addEventListener('keydown', (event) => {
  if ((event.ctrlKey || event.metaKey) && event.key === 's') {
    event.preventDefault(); // Browser-Dialog „Seite speichern“ verhindern
    saveButton.click();
  }
});

// Wichtig · Fallstricke

Deaktivierte Elemente: Bei disabled-Formular-Elementen tut click() nichts. Es wird kein Event ausgelöst und keine Standardaktion ausgeführt.
Nutzer-Aktivierung: Das Öffnen eines Datei-Dialogs (input type="file") und von Pop-ups funktioniert meist nur, wenn click() während einer echten Nutzer-Aktivierung aufgerufen wird, also etwa in einem Klick-Handler. In einem setTimeout nach langer Verzögerung oder nach einem await auf eine langsame Anfrage kann der Aufruf blockiert werden.
Keine echten Maus-Events: Es wird nur click ausgelöst, nicht mousedown, mouseup oder pointerdown. Handler, die sich auf diese Events verlassen, reagieren nicht. Außerdem ist event.isTrusted false.
Kein Fokus: click() setzt keinen Fokus. Rufen Sie bei Bedarf zusätzlich focus() auf.
Endlosschleifen: Wer click() im eigenen Klick-Handler desselben Elements oder eines Elternelements aufruft, kann eine Rekursion auslösen. Browser verhindern zwar, dass dasselbe Element während seines eigenen synthetischen Klicks erneut geklickt wird, trotzdem ist Vorsicht geboten.
Kompatibilität: In allen modernen Browsern verfügbar. Ältere Safari-Versionen unterstützten click() nur auf <input> und <button>, nicht auf beliebigen Elementen. Seit Chrome 92, Firefox 129 und Safari 18.2 ist das Event ein PointerEvent, vorher ein MouseEvent.

Siehe auch

HTMLSelectElement.showPicker() HTMLElement.blur() HTMLElement.focus() HTMLElement.hidePopover() HTMLElement.showPopover()