HTMLElement: beforetoggle-Ereignis

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignisbehandlereigenschaft.

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

onbeforetoggle = (event) => {};

Ein ToggleEvent. Erbt von Event.

Die untenstehenden Beispiele zeigen, wie das beforetoggle-Ereignis bei einem Popover oder einem <dialog>-Element verwendet werden kann. Die gleichen Beispiele würden ähnlich bei anderen Elementtypen funktionieren.

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

HTML

Das HTML besteht aus einem Popover und einem Button, um es ein- und auszuschalten.

<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

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

Unten zeigen wir, wie ein Popover zuerst prüfen könnte, ob es geöffnet werden darf, und falls nicht, Event.preventDefault() aufrufen, um das Ereignis abzubrechen. In diesem Beispiel verwenden wir einen Button, um festzulegen, ob das Popover geöffnet werden kann oder nicht: In einem umfangreicheren 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 Ein- und Ausschalten und einem Button zum Festlegen, ob der Button 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 wollen, dass das Popover geöffnet wird. 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 Ereignislistener für das beforetoggle-Ereignis hinzu. Wenn allowOpen falsch ist, wird preventDefault() aufgerufen, was verhindert, dass das Popup geöffnet wird.

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 zu zyklieren, wird nur ein einziges Ereignis ausgelöst. Dies wird als "Zusammenführung von Ereignissen" bezeichnet.

Zum Beispiel:

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

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

• Öffnen eines modalen Dialogs Beispiel im HTMLDialogElement

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