CloseWatcher.close() — Methode · JavaScript-Referenz

Signatur

CloseWatcher.prototype.close()

Beschreibung

Die Methode close() der Schnittstelle CloseWatcher schließt den Watcher direkt. Anders als bei einer Schließanfrage durch den Nutzer (Esc-Taste, Zurück-Geste unter Android) oder bei requestClose() wird das cancel-Ereignis nicht ausgelöst. Es gibt also keine Möglichkeit, das Schließen per event.preventDefault() abzubrechen. Stattdessen wird sofort das close-Ereignis ausgelöst.

Nach dem Aufruf ist der Watcher inaktiv: Er reagiert nicht mehr auf Schließanfragen, und weitere Aufrufe von close(), requestClose() oder destroy() haben keine Wirkung. Für eine neue Komponente, die wieder geschlossen werden soll, brauchen Sie einen neuen CloseWatcher.

Einsatzbereich: Sie verwenden close(), wenn Ihre eigene Oberfläche das Schließen auslöst und keine Rückfrage nötig ist, zum Beispiel ein „Schließen“-Button in einem eigenen Popover, ein Klick außerhalb eines Menüs oder das Ende eines Zeitlimits. So läuft die gesamte Aufräumlogik zentral im close-Handler, egal ob der Nutzer Esc drückt oder Ihr Code schließt.

close(): kein cancel, löst close aus, deaktiviert den Watcher.
requestClose(): löst zuerst cancel aus (das abgebrochen werden kann), danach close.
destroy(): deaktiviert den Watcher ohne irgendein Ereignis.

Beispiele

Eigenes Seitenmenü mit Schließen-Button

const sidebar = document.querySelector('#sidebar');
const closeBtn = sidebar.querySelector('.close');
let watcher = null;

const openSidebar = () => {
  sidebar.hidden = false;
  watcher = new CloseWatcher();

  // Zentrale Aufräumlogik – gilt für Esc, Zurück-Geste und Button
  watcher.addEventListener('close', () => {
    sidebar.hidden = true;
    watcher = null;
    console.log('Sidebar geschlossen');
  });
};

// Der Button schließt direkt, ohne cancel-Rückfrage
closeBtn.addEventListener('click', () => watcher?.close());

document.querySelector('#menu-toggle')
  .addEventListener('click', openSidebar);

Sidebar geschlossen

close() und requestClose() im Vergleich

const log = (name) => (e) => console.log(`${name}-Ereignis`);

const a = new CloseWatcher();
a.oncancel = log('cancel');
a.onclose = log('close');
a.requestClose(); // cancel, danach close

const b = new CloseWatcher();
b.oncancel = log('cancel');
b.onclose = log('close');
b.close();        // nur close
b.close();        // keine Wirkung, der Watcher ist schon inaktiv

cancel-Ereignis close-Ereignis close-Ereignis

Toast mit Zeitlimit und Feature-Erkennung

const showToast = (text, ms = 3000) => {
  const toast = document.createElement('div');
  toast.className = 'toast';
  toast.textContent = text;
  document.body.append(toast);

  const remove = () => toast.remove();

  if ('CloseWatcher' in window) {
    const watcher = new CloseWatcher();
    watcher.onclose = remove;
    // Nach Ablauf der Zeit direkt schließen
    setTimeout(() => watcher.close(), ms);
  } else {
    // Ersatzlösung für Browser ohne Unterstützung
    setTimeout(remove, ms);
  }
};

showToast('Gespeichert!');

// Wichtig · Fallstricke

Browserunterstützung: CloseWatcher gibt es derzeit nur in Chromium-basierten Browsern (Chrome/Edge ab Version 120). Firefox und Safari unterstützen die Schnittstelle nicht oder nur eingeschränkt. Prüfen Sie deshalb immer mit 'CloseWatcher' in window und sehen Sie eine Ersatzlösung vor, etwa einen keydown-Listener für Esc.
Kein Abbruch möglich: Weil close() das cancel-Ereignis überspringt, können Sie hier z. B. nicht fragen „Ungespeicherte Änderungen verwerfen?“. Für eine solche Rückfrage verwenden Sie requestClose().
Nur einmal nutzbar: Nach close() ist der Watcher dauerhaft inaktiv. Wird die Komponente erneut geöffnet, müssen Sie einen neuen CloseWatcher erzeugen.
Soll eine Komponente ohne close-Ereignis entfernt werden (z. B. beim Abbau im Framework), nehmen Sie destroy(). Sonst läuft Ihre Schließlogik womöglich doppelt.
Native <dialog>-Elemente und das popover-Attribut bringen dieses Schließverhalten schon mit. CloseWatcher brauchen Sie vor allem für eigene Komponenten.

Siehe auch

CloseWatcher CloseWatcher.requestClose() CloseWatcher.destroy() HTMLDialogElement.close() new SharedWorker()