HTMLElement: событие beforetoggle

Событие beforetoggle интерфейса HTMLElement срабатывает на элементе поверхности или <dialog> непосредственно перед его отображением или скрытием.

• Если элемент переходит от скрытого состояния к отображаемому, свойство event.oldState будет установлено в значение closed, а свойство event.newState — в значение open.
• Если элемент переходит от отображаемого состояния к скрытому, то event.oldState будет open, а event.newState будет closed.

Это событие является отменяемым при переключении элемента в открытое состояние ("отображение"), но не при закрытии.

Это событие, среди прочего, может использоваться для:

• предотвращения отображения элемента.
• добавления или удаления классов или свойств от элемента или связанных элементов, например, для управления поведением анимации диалога при открытии и закрытии.
• очистки состояния элемента перед открытием или после скрытия, например, для сброса формы диалога и возвращения значения в пустое состояние или скрытия всех вложенных пользовательских всплывающих окон при повторном открытии всплывающего окна.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

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

onbeforetoggle = (event) => {};

Объект ToggleEvent. Наследуется от Event.

Примеры ниже демонстрируют, как событие beforetoggle может использоваться для элемента поверхности или <dialog>. Те же примеры аналогичным образом будут работать и на других типах элементов.

Этот пример демонстрирует, как прослушивать событие beforetoggle и выводить результат.

HTML

HTML состоит из поверхности и кнопки для ее открытия и закрытия.

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

JavaScript

Код добавляет обработчик события beforetoggle и выводит состояние.

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");
  }
});

Результат

Событие beforetoggle является отменяемым, если оно срабатывает при открытии элемента.

Ниже показано, как поверхность сначала проверяет, разрешено ли ее открытие, и если нет, вызывает Event.preventDefault(), чтобы отменить событие. В этом примере мы используем кнопку для установки возможности открытия поверхности; в более «полноценном» примере это может зависеть от состояния приложения или данных, готовых к отображению в поверхности.

HTML

HTML состоит из поверхности, кнопки для ее открытия и закрытия и кнопки для настройки возможности открытия.

<button popovertarget="mypopover">Toggle the popover</button>
<button id="allow_button"></button>
<div id="mypopover" popover>Popover content</div>

JavaScript

Сначала мы настроим код для моделирования состояния, в котором открытие поверхности не допускается. Это представлено переменной allowOpen, которая переключается при нажатии соответствующей кнопки.

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();
});

Код добавляет обработчик события beforetoggle . Если allowOpen имеет значение false, вызывается preventDefault(), что останавливает открытие всплывающего окна.

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");
  }
});

Результат

Если несколько событий beforetoggle срабатывают до того, как цикл обработки событий успеет выполниться, будет сгенерировано только одно событие. Это называется «слиянием событий».

Например:

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

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

• Открытие модального диалога в примере HTMLDialogElement

• popover глобальное атрибут HTML
• API поверхности
• Соответствующее событие: toggle