HTMLElement: beforetoggle Event

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

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

onbeforetoggle = (event) => {};

Ein ToggleEvent. Erbt von Event.

Die nachstehenden Beispiele zeigen, wie das beforetoggle-Ereignis für ein Popover oder ein <dialog>-Element verwendet werden könnte. Dieselben Beispiele würden ähnlich auf anderen Elementtypen 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 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 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

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

Unten zeigen wir, wie ein Popover zuerst prüfen könnte, ob es sich öffnen darf, und falls nicht, Event.preventDefault() aufrufen, um das Ereignis abzubrechen. In diesem Beispiel verwenden wir einen Button, um festzulegen, ob der Popover geöffnet werden kann oder nicht: In einem umfassenderen Beispiel könnte dies vom Anwendungszustand oder den anzuzeigenden Daten im Popover abhängen.

HTML

Das HTML besteht aus einem Popover, einem Button zum Umschalten zwischen geöffnet und geschlossen, 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

Zunächst richten wir den Code ein, um einen Zustand zu simulieren, in dem wir nicht möchten, dass sich der Popover öffnet. Dies wird durch die Variable allowOpen dargestellt, die beim Klicken auf den zugehörigen Button umgeschaltet 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 Ereignis-Listener für das beforetoggle-Ereignis hinzu. Wenn allowOpen falsch ist, wird preventDefault() aufgerufen, wodurch das Öffnen des Popups verhindert 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 die Chance hat zu durchlaufen, wird nur ein einziges 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-globales Attribut
• Popover API
• Verwandtes Ereignis: toggle