Popover API: всплывание событий не работает при событии перед переключением?
Фон
Ссылка на документацию MDN по Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API (не путать с всплывающим окном Bootstrap).
У меня есть несколько всплывающих окон, что-то вроде этого:
<div id = "Popover_1" popover>Content of 1</div>
<div id = "Popover_2" popover>Content of 2</div>
Я пытаюсь вызвать функцию, если всплывающее окно закрыто. Я полностью понимаю, как добавить прослушиватель событий в каждое поповер, и он работает нормально. Что-то вроде:
window.onload = function() {
const popovers = document.querySelectorAll("[popover]")
popovers.forEach(popover => {
popover.addEventListener("beforetoggle", (event) => {
if (event.newState === "closed") {
console.info(event);
}
});
});
}
Однако для простоты я бы хотел вместо этого использовать document.addEventListener, так как мне нужно запускать одну и ту же функцию независимо от источника всплывающего окна. Насколько я понимаю, это должно сработать из-за нарастания события. Я не могу этого добиться. Я признаю, что некоторые события этого не делают, но, просматривая MDN, я не вижу, чтобы этого не было.
Вопрос
Поэтому мой вопрос: я делаю это неправильно или пузырь не работает? Или у меня есть элементарное непонимание того, с чем я имею дело?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Нет, событие не всплывает, я не уверен, что заставило вас так думать, но если вы посмотрите на характеристики, вы увидите, что оно срабатывает в здесь и здесь, и это в обоих случаях его атрибут bubbles не установлен (только cancelable установлен для «открытого» случая).
Однако вы все равно можете захватить это событие для делегирования:
document.addEventListener("click", (event) => {
const btn = event.target.closest("button[data-target]");
if (!btn) { return; }
const { target } = btn.dataset;
document.querySelector(`#Popover_${target}`).togglePopover();
});
document.addEventListener("beforetoggle", (event) => {
const { newState, oldState, cancelable } = event;
console.info({ newState, oldState });
}, { capture: true });<button data-target=1>show 1</button>
<button data-target=2>show 2</button>
<div id = "Popover_1" popover>Content of 1</div>
<div id = "Popover_2" popover>Content of 2</div>Да, раньше в MDN были таблицы, в которых это говорилось. Судя по всему, его удалили: github.com/mdn/content/issues/22198 В соответствии с этим выпуском действительно следует отметить, что событие не всплывает, но это не так, и это не единственный случай. Я открою вопрос, когда у меня будет время разобраться с этим, потому что это действительно проблематично. Но я боюсь, что это будет нелегко исправить из-за таких случаев, как случай перед переключением, когда одно и то же событие может иметь разные параметры инициализации в зависимости от того, откуда оно было запущено (здесь — отменяемый).
Кстати, я открыл github.com/mdn/content/issues/32832
Спасибо за дополнительные усилия, надеюсь, это будет полезно и другим в будущем!
Спасибо, что указали мне на ссылки на Whatwg.org. Я считаю MDN вполне читабельным и надежным ресурсом для решения подобных вопросов. Когда я исследовал этот вопрос (который из-за начальной загрузки было очень сложно решить), я заметил, что MDN обычно вызывает вызов, когда событие не всплывает. Так как для поповера этого не было, я не был уверен в правде. Я ценю дополнительную информацию, спасибо!