HTMLElement: beforetoggle-Event

Verwenden Sie den Event-Namen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.

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

onbeforetoggle = (event) => {};

Ein ToggleEvent. Erbt von Event.

Die folgenden Beispiele zeigen, wie der beforetoggle-Event bei einem Popover oder <dialog>-Element verwendet werden könnte. Die gleichen Beispiele würden bei anderen Elementtypen ähnlich funktionieren.

Dieses Beispiel zeigt, wie man den beforetoggle-Event überwacht und das Ergebnis protokolliert.

HTML

Das HTML besteht aus einem Popover und einer Schaltfläche zum Umschalten zwischen geöffnet und geschlossen.

<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 den beforetoggle-Event 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

Der beforetoggle-Event ist abbruchfähig, wenn er beim Öffnen eines Elements ausgelöst wird.

Im Folgenden zeigen wir, wie ein Popover zunächst überprüft, ob es geöffnet werden darf, und wenn nicht, Event.preventDefault() aufruft, um den Event abzubrechen. In diesem Beispiel verwenden wir eine Schaltfläche, um festzulegen, ob das Popover geöffnet werden kann oder nicht: In einem "vollständigeren" 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, einer Schaltfläche zum Umschalten zwischen geöffnet und geschlossen und einer Schaltfläche zum Festlegen, 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

Zuerst richten wir den Code ein, um einen Zustand zu simulieren, in dem wir nicht möchten, dass das Popover geöffnet wird. Dies wird durch die Variable allowOpen dargestellt, die umgeschaltet wird, wenn die zugehörige Schaltfläche 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 den beforetoggle-Event 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

Wenn mehrere beforetoggle-Events ausgelöst werden, bevor die Ereignisschleife die Möglichkeit hat, einen Zyklus abzuschließen, wird nur ein einzelner Event ausgelöst. Dies wird als "Event-Zusammenlegung" bezeichnet.

Zum Beispiel:

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

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

• Beispiel zum Öffnen eines modalen Dialogs in HTMLDialogElement

• popover HTML-Global-Attribut
• Popover API
• Verwandter Event: toggle