DasCloseWatcher-Interface ermöglicht es einem benutzerdefinierten UI-Komponenten mit Öffnen- und Schließen-Semantik, auf gerätespezifische Schließaktionen in gleicher Weise zu reagieren wie eine eingebaute Komponente.

DasCloseWatcher-Interface erbt vonEventTarget.

Konstruktor

CloseWatcher()Experimentell

Erstellt eine neue Instanz vonCloseWatcher.

Instanzmethoden

Dieses Interface erbt auch Methoden von seinem übergeordneten InterfaceEventTarget.

CloseWatcher.requestClose()Experimentell

Löst eincancel-Ereignis aus und, wenn dieses Ereignis nicht mitEvent.preventDefault() abgebrochen wird, fährt mit dem Auslösen einesclose-Ereignisses fort und deaktiviert schließlich den Close-Watcher, als obdestroy() aufgerufen worden wäre.

CloseWatcher.close()Experimentell

Löst sofort dasclose-Ereignis aus, ohne zuerstcancel auszulösen, und deaktiviert den Close-Watcher, als obdestroy() aufgerufen worden wäre.

CloseWatcher.destroy()Experimentell

Deaktiviert den Close-Watcher, sodass er keineclose-Ereignisse mehr empfängt.

Ereignisse

cancelExperimentell

Ein Ereignis, das vor demclose-Ereignis ausgelöst wird, sodass dasclose-Ereignis verhindert werden kann.

closeExperimentell

Ein Ereignis, das ausgelöst wird, wenn eine Schließanforderung empfangen wurde.

Beschreibung

Einige UI-Komponenten haben ein "Schließverhalten", das bedeutet, dass die Komponente erscheint, und der Benutzer sie schließen kann, wenn er damit fertig ist, z. B. Seitenleisten, Popups, Dialoge oder Benachrichtigungen.

Benutzer erwarten in der Regel, dass sie einen bestimmten Mechanismus verwenden können, um diese Elemente zu schließen, und dieser Mechanismus ist oft gerätespezifisch. Beispielsweise könnte es auf einem Gerät mit Tastatur dieEsc-Taste sein, während Android die Zurück-Taste verwenden könnte. Bei eingebauten Komponenten, wiePopover oder<dialog>-Elementen, kümmert sich der Browser um diese Unterschiede und schließt das Element, wenn der Benutzer die dem Gerät entsprechende Schließaktion ausführt. Bei einer von einem Webentwickler implementierten schließbaren UI-Komponente (zum Beispiel einer Seitenleiste) ist es jedoch schwierig, dieses gerätespezifische Schließverhalten zu implementieren.

DasCloseWatcher-Interface löst dieses Problem, indem es eincancel-Ereignis, gefolgt von einemclose-Ereignis bereitstellt, wenn der Benutzer die gerätespezifische Schließaktion ausführt.Webanwendungen können denonclose-Handler verwenden, um das UI-Element als Reaktion auf das gerätespezifische Ereignis zu schließen.Sie können auch dieselben Ereignisse als Reaktion auf den normalen Schließmechanismus des UI-Elements auslösen und dann eine gemeinsameclose-Ereignisbehandlung für sowohl die anwendungs- als auch die gerätespezifische Schließaktion implementieren.Sobald deronclose-Ereignishandler abgeschlossen ist, wird derCloseWatcher zerstört und die Ereignisse werden nicht mehr ausgelöst.

In manchen Anwendungen darf das UI-Element möglicherweise nur geschlossen werden, wenn es sich in einem bestimmten Zustand befindet, zum Beispiel, wenn einige notwendige Informationen ausgefüllt sind.Um diese Fälle zu berücksichtigen, können Anwendungen dasclose-Ereignis daran hindern, ausgelöst zu werden, indem sie einen Handler für dascancel-Ereignis implementieren, derEvent.preventDefault() aufruft, wenn das UI-Element nicht bereit ist, geschlossen zu werden.

Sie könnenCloseWatcher-Instanzen ohneBenutzeraktivierung erstellen, was nützlich sein kann, um Fälle wie Dialoge zum Ablauf der Sitzungsinaktivität zu implementieren. Wenn Sie jedoch mehr als einenCloseWatcher ohne Benutzeraktivierung erstellen, werden die Beobachter gruppiert, sodass eine einzige Schließanforderung sie beide schließen wird.Darüber hinaus muss der erste Close-Watcher nicht unbedingt einCloseWatcher-Objekt sein: Es könnte ein modales Dialogelement oder ein Popover sein, das von einem Element mit dem Popover-Attribut erzeugt wird.

Beispiele

Verarbeiten von Schließanforderungen

In diesem Beispiel haben Sie eine eigene UI-Komponente (einen Picker) und möchten sowohl die Standard-Schließmethode der Plattform (z. B. dieEsc-Taste) als auch Ihre benutzerdefinierte Schließmethode (eine Schaltfläche zum Schließen) unterstützen.

Sie erstellen einenCloseWatcher, um alleclose-Ereignisse zu behandeln.

Deronclick-Handler Ihrer UI-Komponente kannrequestClose aufrufen, um ein Schließen zu beantragen und Ihre Schließanforderung durch denselbenonclose-Handler zu leiten, den die Plattform-Schließmethode verwendet.

const watcher = new CloseWatcher();const picker = setUpAndShowPickerDOMElement();let chosenValue = null;watcher.onclose = () => {  chosenValue = picker.querySelector("input").value;  picker.remove();};picker.querySelector(".close-button").onclick = () => watcher.requestClose();

Schließen einer Seitenleiste durch eine Plattform-Schließanforderung

In diesem Beispiel haben wir eine Seitenleistenkomponente, die angezeigt wird, wenn eine "Öffnen"-Schaltfläche ausgewählt wird, und durch entweder eine "Schließen"-Schaltfläche oder plattformspezifische Mechanismen ausgeblendet wird.Um es interessanter zu machen, ist dies ein Live-Beispiel!

Beachten Sie auch, dass das Beispiel etwas konstruiert ist, da wir normalerweise eine Umschalttaste verwenden würden, um den Zustand einer Seitenleiste zu ändern.Das könnten wir sicherlich tun, aber die Verwendung separater "Öffnen"- und "Schließen"-Schaltflächen macht es einfacher, die Funktion zu demonstrieren.

HTML

Das HTML definiert "Öffnen" und "Schließen"<button>-Elemente sowie<div>-Elemente für den Hauptinhalt und die Seitenleiste.CSS wird verwendet, um die Anzeige des Seitenleistenelements zu animieren, wenn dieopen-Klasse zu den Seitenleisten- und Inhaltselementen hinzugefügt oder von ihnen entfernt wird (dieses CSS ist ausgeblendet, da es für das Beispiel nicht relevant ist).

<button type="button">Open</button><button type="button">Close</button><div>Sidebar</div><div>Main content</div>

.sidebar {  position: fixed;  top: 20px;  left: -300px;  right: auto;  bottom: 0;  width: 300px; /* Adjust the width as needed */  background-color: lightblue;}.main-content {  position: fixed;  top: 20px;  left: 0;  right: 0;  bottom: 0;  width: auto; /* Adjust the width as needed */  background-color: green;  margin-left: 0px; /* Adjust for the sidebar width */}.sidebar.open {  left: 0; /* Slide the sidebar to the right when open */  transition: left 0.3s ease-in-out; /* Add a smooth transition effect */}.main-content.open {  margin-left: 300px; /* Adjust for the sidebar width */  transition: margin-left 0.3s ease-in-out;  background-color: green;}

JavaScript

Der Code erhält zunächst Variablen für die Buttons und<div>-Elemente, die im HTML definiert sind.Es definiert auch eine FunktioncloseSidebar(), die aufgerufen wird, wenn die Seitenleiste geschlossen wird, um dieopen-Klasse von den<div>-Elementen zu entfernen, und fügt einenclick-Ereignislistener hinzu, der die MethodeopenSidebar() aufruft, wenn die "Öffnen"-Schaltfläche angeklickt wird.

const sidebar = document.querySelector(".sidebar");const mainContent = document.querySelector(".main-content");const sidebarOpen = document.getElementById("sidebar-open");const sidebarClose = document.getElementById("sidebar-close");function closeSidebar() {  sidebar.classList.remove("open");  mainContent.classList.remove("open");}sidebarOpen.addEventListener("click", openSidebar);

Die Umsetzung vonopenSidebar() ist unten angegeben.Die Methode überprüft zunächst, ob die Seitenleiste bereits geöffnet ist, und wenn nicht, fügt sie den Elementen dieopen-Klasse hinzu, sodass die Seitenleiste angezeigt wird.

Wir erstellen dann einen neuenCloseWatcher und fügen einen Listener hinzu, derclose() aufruft, wenn auf die "Schließen"-Schaltfläche geklickt wird.Dies stellt sicher, dass dasclose-Ereignis aufgerufen wird, wenn entweder plattformspezifische Schließmethoden oder die "Schließen"-Schaltfläche verwendet werden.Die Umsetzung desonclose()-Ereignishandlers schließt einfach die Seitenleiste, und derCloseWatcher wird dann automatisch zerstört.

function openSidebar() {  if (!sidebar.classList.contains("open")) {    sidebar.classList.add("open");    mainContent.classList.add("open");    // Add new CloseWatcher    const watcher = new CloseWatcher();    sidebarClose.addEventListener("click", () => watcher.close());    // Handle close event, invoked by platform mechanisms or "Close" button    watcher.onclose = () => {      closeSidebar();    };  }}

Beachten Sie, dass wir uns entschieden haben,close() auf dem Beobachter aufzurufen anstattCloseWatcher.requestClose(), da wir nicht möchten, dass dascancel-Ereignis ausgelöst wird (wir würdenrequestClose() und dencancel-Ereignishandler verwenden, wenn es einen Grund gäbe, zu verhindern, dass die Seitenleiste vorzeitig geschlossen wird).

Ergebnis

Wählen Sie die "Öffnen"-Taste, um die Seitenleiste zu öffnen. Sie sollten in der Lage sein, die Seitenleiste mit der "Schließen"-Taste oder der üblichen Plattformmethode, wie derEsc-Taste unter Windows, zu schließen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• close Ereignis aufHTMLDialogElement