CloseWatcher.destroy() — Methode · JavaScript-Referenz

Signatur

CloseWatcher.prototype.destroy()

Beschreibung

Die Methode destroy() deaktiviert einen CloseWatcher endgültig. Danach reagiert er nicht mehr auf Schließanforderungen des Geräts, also etwa auf die Esc-Taste am Desktop oder die Zurück-Geste bzw. -Taste unter Android. Außerdem wird er aus dem internen Stapel der aktiven Close Watcher entfernt.

Anders als close() oder requestClose() löst destroy() keine Events aus: Weder cancel noch close werden gefeuert. Deshalb ist die Methode die richtige Wahl, wenn deine Komponente auf anderem Weg geschlossen wird, zum Beispiel über einen eigenen Schließen-Button, über programmatisches Ausblenden oder beim Entfernen einer Komponente in einem Framework. Die Schließlogik hast du dann schon selbst ausgeführt, und der Watcher soll nur noch aufgeräumt werden.

Ein zerstörter Watcher lässt sich nicht wieder aktivieren. Soll dieselbe Komponente später wieder geöffnet werden, erzeugst du mit new CloseWatcher() eine neue Instanz. Wenn du destroy() mehrmals aufrufst oder auf einem bereits geschlossenen Watcher aufrufst, passiert nichts.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Eigenes Popover: Watcher beim Schließen per Button zerstören

const popover = document.querySelector('#info-popover');
const closeBtn = popover.querySelector('.close');
let watcher = null;

const hidePopover = () => {
  popover.hidden = true;
};

const openPopover = () => {
  popover.hidden = false;
  watcher = new CloseWatcher();
  // Esc bzw. Zurück-Geste schließt das Popover
  watcher.addEventListener('close', () => {
    hidePopover();
    watcher = null;
  });
};

closeBtn.addEventListener('click', () => {
  hidePopover();
  // Schließlogik ist bereits erledigt – nur noch aufräumen, ohne 'close'-Event
  watcher?.destroy();
  watcher = null;
  console.log('Popover per Button geschlossen, Watcher zerstört');
});

document.querySelector('#open-info').addEventListener('click', openPopover);

Popover per Button geschlossen, Watcher zerstört

destroy() löst im Gegensatz zu close() keine Events aus

const w1 = new CloseWatcher();
w1.onclose = () => console.log('w1: close-Event');
w1.close();   // feuert 'close'

const w2 = new CloseWatcher();
w2.onclose = () => console.log('w2: close-Event');
w2.destroy(); // feuert nichts
w2.destroy(); // weiterer Aufruf bewirkt nichts
console.log('fertig');

w1: close-Event fertig

Aufräumen beim Entfernen einer Komponente (mit Feature-Erkennung)

class SidePanel {
  #watcher = null;

  constructor(element) {
    this.element = element;
  }

  open() {
    this.element.classList.add('open');
    if ('CloseWatcher' in window) {
      this.#watcher = new CloseWatcher();
      this.#watcher.onclose = () => this.#hide();
    }
  }

  #hide() {
    this.element.classList.remove('open');
    this.#watcher = null;
  }

  // Wird z. B. beim Seitenwechsel in einer SPA aufgerufen
  dispose() {
    this.#watcher?.destroy();
    this.#watcher = null;
    this.element.remove();
    console.log('SidePanel entsorgt');
  }
}

const panel = new SidePanel(document.querySelector('#side-panel'));
panel.open();
panel.dispose();

SidePanel entsorgt

// Wichtig · Fallstricke

Browser-Unterstützung: CloseWatcher ist bisher nur in Chromium-basierten Browsern verfügbar (Chrome/Edge ab Version 126). Firefox und Safari unterstützen die Schnittstelle nicht standardmäßig. Prüfe deshalb immer mit 'CloseWatcher' in window, ob sie vorhanden ist, und sieh als Ersatz einen keydown-Handler für Escape vor.
Keine Events: Wer die Aufräumlogik im close-Handler ablegt, sollte beachten, dass sie bei destroy() nicht ausgeführt wird. Soll die normale Schließlogik laufen, verwende stattdessen close() (ohne cancel-Event) oder requestClose() (mit cancel-Event).
Nicht wiederverwendbar: Nach destroy() ist der Watcher dauerhaft inaktiv. Beim erneuten Öffnen musst du eine neue Instanz erzeugen.
Alternative per AbortSignal: Übergibst du dem Konstruktor ein signal (new CloseWatcher({ signal })), hat ein Aufruf von controller.abort() dieselbe Wirkung wie destroy(). Das ist praktisch, wenn mehrere Ressourcen gemeinsam aufgeräumt werden sollen.
Vergisst du destroy(), bleibt ein verwaister Watcher auf dem Stapel. Er kann dann die nächste Schließanforderung (etwa die Zurück-Geste unter Android) abfangen, sodass sie nicht bei der erwarteten Komponente ankommt.

Siehe auch

CloseWatcher CloseWatcher.close() CloseWatcher.requestClose() HTMLDialogElement GPUDevice.destroy()