CloseWatcher.requestClose() — Methode · JavaScript-Referenz

Signatur

CloseWatcher.prototype.requestClose()

Beschreibung

Mit requestClose() wird ein CloseWatcher genauso geschlossen, als hätte die Person eine Schließ-Anfrage des Systems ausgelöst, etwa die Esc-Taste oder die Zurück-Geste bzw. -Taste auf Android. Zuerst wird ein cancel-Ereignis ausgelöst. Ruft ein Handler darin event.preventDefault() auf, bricht der Vorgang ab und der Watcher bleibt aktiv. Andernfalls folgt das close-Ereignis, und der Watcher wird dauerhaft deaktiviert (wie bei destroy()).

Die Methode eignet sich besonders für eigene „Schließen“-Schaltflächen in Dialogen, Seitenleisten oder Popovern. So läuft das Schließen über die Oberfläche durch dieselbe Logik wie das Schließen über die Systemgeste, zum Beispiel eine Rückfrage „Ungespeicherte Änderungen verwerfen?“ im cancel-Handler.

Der Unterschied zu close(): close() überspringt das cancel-Ereignis und löst sofort close aus. destroy() deaktiviert den Watcher ganz ohne Ereignisse. Wird requestClose() per Skript aufgerufen, ist das cancel-Ereignis immer abbrechbar (event.cancelable === true). Bei Systemgesten gilt das nur, wenn vorher eine Benutzeraktivierung stattgefunden hat.

Rückgabewert

Typ

undefined

Beschreibung

Kein Rückgabewert. Das Ergebnis wird nur über die Ereignisse cancel und close mitgeteilt.

Beispiele

Eigener Schließen-Button für ein Seitenmenü

const panel = document.querySelector('#sidebar');
const closeBtn = document.querySelector('#sidebar-close');

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

  watcher.addEventListener('close', () => {
    panel.hidden = true;
    console.log('Seitenleiste geschlossen');
  });

  // Button und Esc/Zurück-Geste laufen über denselben Weg
  closeBtn.onclick = () => watcher.requestClose();
};

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

Seitenleiste geschlossen

Schließen bei ungespeicherten Änderungen verhindern

const form = document.querySelector('#edit-form');
let dirty = false;
form.addEventListener('input', () => { dirty = true; });

const watcher = new CloseWatcher();

watcher.oncancel = (event) => {
  if (dirty && !confirm('Änderungen verwerfen?')) {
    event.preventDefault(); // Watcher bleibt aktiv
    console.log('Schließen abgebrochen');
  }
};

watcher.onclose = () => {
  form.closest('.modal').remove();
  console.log('Modal entfernt');
};

document.querySelector('#cancel-btn')
  .addEventListener('click', () => watcher.requestClose());

Schließen abgebrochen // bei „Abbrechen“ im confirm-Dialog Modal entfernt // bei „OK“

requestClose() vs. close() mit Feature-Erkennung

if ('CloseWatcher' in window) {
  const w1 = new CloseWatcher();
  w1.oncancel = () => console.log('w1: cancel');
  w1.onclose = () => console.log('w1: close');
  w1.requestClose(); // cancel -> close

  const w2 = new CloseWatcher();
  w2.oncancel = () => console.log('w2: cancel');
  w2.onclose = () => console.log('w2: close');
  w2.close(); // nur close

  w1.requestClose(); // bereits deaktiviert: keine Ausgabe
} else {
  console.log('CloseWatcher nicht unterstützt – Fallback auf keydown Escape');
}

w1: cancel w1: close w2: close

// Wichtig · Fallstricke

Browser-Unterstützung: Bisher nur in Chromium-basierten Browsern (ab Version 126). Vorher immer mit 'CloseWatcher' in window prüfen und notfalls auf keydown mit Escape zurückgreifen.
Nach einem erfolgreichen Schließen ist der Watcher dauerhaft deaktiviert. Weitere Aufrufe von requestClose() bewirken nichts. Für ein erneutes Öffnen muss ein neuer CloseWatcher erzeugt werden.
Wer preventDefault() im cancel-Handler aufruft, sollte der Person eine klare Rückmeldung geben. Sonst wirkt die Schließen-Schaltfläche kaputt.
Über die Option signal im Konstruktor (new CloseWatcher({ signal })) lässt sich der Watcher per AbortController zerstören. Danach wirkt requestClose() ebenfalls nicht mehr.
Native <dialog>-Elemente und das popover-Attribut bringen dieses Verhalten schon mit. CloseWatcher lohnt sich vor allem für eigene UI-Komponenten.

Siehe auch

CloseWatcher.close() CloseWatcher.destroy() LockManager.request() Bluetooth.requestDevice() GPUAdapter.requestDevice()