HTMLElement: beforetoggle Event

Baseline 2024

Neu verfügbar

Seit April 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Das beforetoggle-Ereignis des HTMLElement-Interfaces wird bei einem Popover oder <dialog>-Element unmittelbar bevor es angezeigt oder verborgen wird, ausgelöst.

Wenn das Element von verborgen zu angezeigt wechselt, ist die event.oldState-Eigenschaft auf closed gesetzt und die event.newState-Eigenschaft auf open.
Wenn das Element von angezeigt zu verborgen wechselt, wird event.oldState open sein und event.newState closed.

Dieses Ereignis ist abbrechbar, wenn ein Element zu "offen" ("show") umgeschaltet wird, jedoch nicht, wenn das Element geschlossen wird.

Unter anderem kann dieses Ereignis verwendet werden, um:

zu verhindern, dass ein Element angezeigt wird.
Klassen oder Eigenschaften von dem Element oder assoziierten Elementen hinzuzufügen oder zu entfernen, um beispielsweise das Animationsverhalten eines Dialogs zu steuern, während er geöffnet und geschlossen wird.
den Zustand des Elements zu löschen, bevor es geöffnet oder nachdem es verborgen wurde, um zum Beispiel ein Dialogformular zurückzusetzen und den Rückgabewert in einen leeren Zustand zu versetzen oder geschachtelte manuelle Popovers zu verbergen, wenn ein Popup wieder geöffnet wird.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("beforetoggle", (event) => { })

onbeforetoggle = (event) => { }

Die folgenden Beispiele demonstrieren, wie das beforetoggle-Ereignis für ein Popover-Element verwendet werden könnte. Die gleichen Beispiele würden ähnlich auf einem <dialog>-Element funktionieren.

Einfaches Beispiel

Dieses Beispiel zeigt, wie das beforetoggle-Ereignis überwacht und das Ergebnis protokolliert wird.

HTML

Das HTML besteht aus einem Popover und einem Button, um es zu öffnen und zu schließen.

html

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

<pre id="log"></pre>

#log {
  height: 150px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

Der Code fügt einen Ereignislistener für das beforetoggle-Ereignis hinzu und protokolliert den Zustand.

const popover = document.getElementById("mypopover");

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    log("Popover is about to be shown");
  } else {
    log("Popover is about to be hidden");
  }
});

Ergebnis

Das beforetoggle-Ereignis ist abbrechbar, wenn es beim Öffnen eines Elements ausgelöst wird.

Unten zeigen wir, wie ein Popover zuerst überprüft, ob es geöffnet werden darf, und wenn nicht, wird Event.preventDefault() aufgerufen, um das Ereignis abzubrechen. In diesem Beispiel verwenden wir eine Checkbox, um festzulegen, ob das Popover geöffnet werden kann oder nicht: In einem umfassenderen Beispiel könnte dies vom Anwendungszustand oder davon abhängen, ob die Daten im Popover bereit zur Anzeige sind.

HTML

Das HTML besteht aus einem Popover, einem Button zum Öffnen und Schließen und einer Checkbox, um festzulegen, ob das Popover geöffnet werden darf.

html

<button popovertarget="mypopover">Toggle the popover</button>
<label for="allow-popover">
  Allow opening <input type="checkbox" id="allow-popover" checked />
</label>
<div id="mypopover" popover>Popover content</div>

<pre id="log"></pre>

#log {
  height: 150px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

Zuerst setzen wir den Code auf, um einen Zustand zu simulieren, in dem wir dem Popover erlauben wollen, sich zu öffnen. Dies wird durch die Variable allowOpen dargestellt, die umgeschaltet wird, wenn die zugehörige Checkbox umgeschaltet wird.

const allowCheckbox = document.getElementById("allow-popover");

let allowOpen = true;

allowCheckbox.addEventListener("change", (event) => {
  allowOpen = allowCheckbox.checked;
});

Der Code fügt einen Ereignislistener für das beforetoggle-Ereignis hinzu. Wenn allowOpen falsch ist, wird preventDefault() aufgerufen, was das Öffnen des Popups verhindert.

const popover = document.getElementById("mypopover");

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    if (allowOpen) {
      log("Popover is about to be shown");
    } else {
      log("Popover opening prevented");
      event.preventDefault();
    }
  } else {
    log("Popover is about to be hidden");
  }
});