HTMLElement: beforetoggle-Ereignis

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

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

onbeforetoggle = (event) => {};

Ein ToggleEvent, das von Event erbt.

Die Beispiele unten demonstrieren, wie das beforetoggle-Ereignis bei einem Popover- oder <dialog>-Element verwendet werden könnte. Die gleichen Beispiele würden auf anderen Elementtypen ähnlich funktionieren.

Dieses Beispiel zeigt, wie das beforetoggle-Ereignis abgehört und das Ergebnis protokolliert wird.

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 Event 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 beim Öffnen eines Elements ausgelöst wird.

Im Folgenden zeigen wir, wie ein Popover überprüft, ob es geöffnet werden darf, und falls 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 „vollständigeren“ Beispiel könnte dies von der Anwendungszustand abhängen oder davon, ob die Daten im Popover bereit sind, angezeigt zu werden.

HTML

Das HTML besteht aus einem Popover, einem Button, um es zu öffnen und zu schließen, und einem Button, um festzulegen, ob das Popover geöffnet werden kann.

<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

Zunächst richten wir den Code ein, um einen Zustand zu simulieren, in dem das Öffnen des Popovers nicht erlaubt ist. 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 Event Listener für das beforetoggle-Ereignis hinzu. Wenn allowOpen auf false gesetzt ist, wird preventDefault() aufgerufen, was das Öffnen des Popovers 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

Wenn mehrere beforetoggle-Ereignisse ausgelöst werden, bevor die Ereignisschleife eine Chance hat, sich zu erneuern, wird nur ein einzelnes Ereignis ausgelöst. Dies wird als „Ereignis-Koaleszenz“ bezeichnet.

Zum Beispiel:

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

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

• Öffnen eines modalen Dialogs Beispiel in HTMLDialogElement

• popover HTML-Globalattribut
• Popover-API
• Verwandtes Ereignis: toggle