HTMLElement: beforetoggle-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Ereignishandler-Eigenschaft der Schnittstelle zuweisen:

onbeforetoggle = (event) => { }

Ereignistyp

Ein ToggleEvent. Erbt von Event.

Beispiele

Die folgenden Beispiele zeigen, wie das beforetoggle-Ereignis für ein Popover-Element verwendet werden kann. Dieselben Beispiele funktionieren in ähnlicher Weise mit einem <dialog>-Element.

Einfaches Beispiel

Dieses Beispiel zeigt, wie Sie auf das beforetoggle-Ereignis reagieren und das Ergebnis protokollieren können.

HTML

Das HTML besteht aus einem Popover und einer Schaltfläche, mit der es geöffnet und geschlossen werden kann.

<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

Öffnen eines Popovers verhindern

Das beforetoggle-Ereignis kann abgebrochen werden, wenn es beim Öffnen eines Elements ausgelöst wird.

Im Folgenden zeigen wir, wie ein Popover zunächst prüfen kann, ob es geöffnet werden darf, und andernfalls mit Event.preventDefault() das Ereignis abbricht. In diesem Beispiel legen wir über ein Kontrollkästchen fest, ob das Popover geöffnet werden darf. In einem umfangreicheren Beispiel könnte dies vom Zustand der Anwendung abhängen oder davon, ob die Daten im Popover zur Anzeige bereit sind.

HTML

Das HTML besteht aus einem Popover, einer Schaltfläche zum Öffnen und Schließen sowie einem Kontrollkästchen, mit dem festgelegt wird, ob das Popover geöffnet werden darf.

<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

Zunächst richten wir den Code so ein, dass er einen Zustand simuliert, in dem das Öffnen des Popovers erlaubt ist. Diesen Zustand stellt die Variable allowOpen dar, deren Wert sich ändert, wenn das zugehörige Kontrollkästchen aktiviert oder deaktiviert wird.

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

let allowOpen = true;

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

Der Code fügt einen Ereignis-Listener für das beforetoggle-Ereignis hinzu. Wenn allowOpen false ist, wird preventDefault() aufgerufen. Dadurch wird verhindert, dass sich das Popover öffnet.

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

Weitere Beispiele

• Beispiel zum Öffnen eines modalen Dialogs in HTMLDialogElement

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das globale HTML-Attribut popover
• Popover API
• Verwandtes Ereignis: toggle