HTMLElement: beforetoggle Ereignis

Syntax

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

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

onbeforetoggle = (event) => { }

Ereignistyp

Ein ToggleEvent. Erbt von Event.

Beispiele

Die untenstehenden 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.

Einfaches Beispiel

Dieses Beispiel zeigt, wie man das beforetoggle Ereignis abfängt und das Ergebnis protokolliert.

HTML

Das HTML besteht aus einem Popover und einem Schalter, 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 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

Verhindern, dass ein Popover geöffnet wird

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

Unten zeigen wir, wie ein Popover zuerst überprüfen könnte, ob es geöffnet werden darf, und falls nicht, wird Event.preventDefault() aufgerufen, um das Ereignis abzubrechen. In diesem Beispiel verwenden wir einen Schalter, um festzulegen, ob das Popover geöffnet werden kann oder nicht: In einem "vollständigeren" Beispiel könnte dies vom Anwendungszustand oder davon abhängen, ob die Daten im Popover zum Anzeigen bereit sind.

HTML

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

<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

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 das zugehörige Kontrollkästchen umgeschaltet 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, 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

Eine Anmerkung zur Zusammenführung von beforetoggle Ereignissen

Wenn mehrere beforetoggle Ereignisse ausgelöst werden, bevor der Ereignisschleifen-Zyklus eine Chance hat, nur ein einziges Ereignis wird ausgelöst. Dies wird als "Ereignis-Zusammenführung" bezeichnet.

Zum Beispiel:

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

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

Weitere Beispiele

• Beispiel zum Öffnen eines modalen Dialogs in HTMLDialogElement

Spezifikationen

Browser-Kompatibilität

Siehe auch

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