HTMLElement: beforetoggle Ereignis

Syntax

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

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

onbeforetoggle = (event) => { }

Ereignistyp

Ein ToggleEvent. Erbt von Event.

Beispiele

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 auf anderen Elementtypen ähnlich funktionieren.

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.

<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

Öffnen eines Popovers verhindern

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

Unten zeigen wir, wie ein Popover, das möglicherweise zuerst prüft, ob es geöffnet werden darf, und wenn nicht, Event.preventDefault() aufruft, um das Ereignis abzubrechen. In diesem Beispiel verwenden wir einen Button, um festzulegen, ob das Popover geöffnet werden kann oder nicht: in einem umfassenderen 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, um es zu öffnen und zu schließen, und einem Button, um festzulegen, ob der Button geöffnet werden kann.

<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 richten wir den Code ein, um einen Zustand zu simulieren, in dem wir nicht wollen, dass das Popover geöffnet wird. Dies wird durch die Variable allowOpen dargestellt, die umgeschaltet wird, wenn das zugehörige Kontrollkästchen 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 false 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 zur Koaleszenz von beforetoggle Ereignissen

Wenn mehrere beforetoggle Ereignisse ausgelöst werden, bevor die Ereignisschleife einen Zyklus durchgeführt hat, wird nur ein einziges Ereignis ausgelöst. Dies wird als "Ereigniskoaleszenz" bezeichnet.

Zum Beispiel:

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

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

Weitere Beispiele

• Öffnen eines modalen Dialogs Beispiel in HTMLDialogElement

Spezifikationen

Browser-Kompatibilität

Siehe auch

• popover HTML globales Attribut
• Popover API
• Verwandtes Ereignis: toggle