HTMLElement: beforetoggle Ereignis

Baseline 2024 *

Newly available

Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Das beforetoggle Ereignis der HTMLElement Schnittstelle wird bei einem Popover oder einem <dialog> Element unmittelbar bevor es angezeigt oder versteckt wird, ausgelöst.

Wenn das Element von versteckt zu sichtbar wechselt, wird die Eigenschaft event.oldState auf closed gesetzt und die Eigenschaft event.newState auf open.
Wenn das Element von sichtbar zu versteckt wechselt, wird event.oldState auf open und event.newState auf closed gesetzt.

Dieses Ereignis ist cancelable, wenn ein Element geöffnet ("angezeigt") wird, aber 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, zum Beispiel um das Animationsverhalten eines Dialogs beim Öffnen und Schließen zu steuern.
den Zustand des Elements zu löschen, bevor es geöffnet oder nachdem es versteckt wird, zum Beispiel um ein Dialogformular und den Rückgabewert auf einen leeren Zustand zurückzusetzen oder alle verschachtelten manuellen Popover beim erneuten Öffnen eines Popups zu verbergen.

Syntax

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

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

onbeforetoggle = (event) => { }

Die folgenden Beispiele zeigen, wie das beforetoggle Ereignis für ein Popover oder ein <dialog> Element verwendet werden könnte. Die gleichen Beispiele würden ähnlich auf andere Elementtypen wirken.

Einfaches Beispiel

Dieses Beispiel zeigt, wie man auf das beforetoggle Ereignis hört und das Ergebnis protokolliert.

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 Ereignis-Listener 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 ausgelöst wird, um ein Element zu öffnen.

Unten zeigen wir, wie ein Popover zuerst überprüft, ob es sich öffnen darf, und wenn nicht, Event.preventDefault() aufruft, um das Ereignis abzubrechen. In diesem Beispiel verwenden wir einen Button, um zu setzen, ob das Popover geöffnet werden darf oder nicht: In einem "ausgereifteren" Beispiel könnte dies vom Anwendungszustand abhängen oder davon, ob die Daten im Popover bereit zur Anzeige sind.

HTML

Das HTML besteht aus einem Popover, einem Button zum Öffnen und Schließen und einem Button, um festzulegen, ob der Button geöffnet werden kann.

html

<button popovertarget="mypopover">Toggle the popover</button>
<button id="allow_button"></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

Zuerst richten wir den Code so ein, dass er einen Zustand simuliert, in dem wir nicht möchten, dass sich das Popover öffnet. Dies wird durch die Variable allowOpen dargestellt, die umgeschaltet wird, wenn der zugehörige Button geklickt wird.

const allowButton = document.getElementById("allow_button");

let allowOpen = true;

function toggleState() {
  allowOpen = !allowOpen;
  allowButton.innerText = allowOpen ? "Open Allowed" : "Open Prevented";
}

toggleState();

allowButton.addEventListener("click", (event) => {
  toggleState();
});

Der Code fügt einen Ereignis-Listener 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");
  }
});

Ergebnis

Eine Anmerkung zum beforetoggle Ereignis-Koaleszenz

Wenn mehrere beforetoggle Ereignisse ausgelöst werden, bevor die Ereignisschleife eine Chance hat, sich zu drehen, wird nur ein einziges Ereignis ausgelöst. Dies wird als "Ereignis-Koaleszenz" bezeichnet.

Zum Beispiel:

popover.addEventListener("beforetoggle", () => {
  // …
});

popover.showPopover();
popover.hidePopover();
// `beforetoggle` only fires once

Weitere Beispiele

Öffnen eines modalen Dialogs Beispiel in HTMLDialogElement

Spezifikationen

Specification
HTML # event-beforetoggle

Browser-Kompatibilität

Siehe auch

popover HTML globales Attribut
Popover API
Verwandtes Ereignis: toggle

HTMLElement: beforetoggle Ereignis

Syntax

Ereignistyp

Beispiele

Einfaches Beispiel

HTML

JavaScript

Ergebnis

Verhindern, dass ein Popover öffnet

HTML

JavaScript

Ergebnis

Eine Anmerkung zum beforetoggle Ereignis-Koaleszenz

Weitere Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch