HTMLElement: beforetoggle 事件
HTMLElement 接口的 beforetoggle 事件在 popover 或 <dialog> 元素即将显示或隐藏时触发。
- 如果元素正从隐藏状态转为显示状态，则
event.oldState属性将设置为closed，而event.newState属性将设置为open。 - 如果元素正从显示状态转为隐藏状态，则
event.oldState将为open，而event.newState将为closed。
当元素被切换为显示时，此事件是 可取消的，但当元素关闭时则不可取消。
除其他事项外，此事件可用于：
- 阻止元素显示。
- 向元素或相关元素添加或删除类或属性，例如控制对话框打开和关闭时的动画行为。
- 在元素打开之前或隐藏之后清除元素的状态，例如重置对话框表单并将其返回值设为空状态，或在重新打开弹出窗口时隐藏任何嵌套的手动弹出窗口。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
addEventListener("beforetoggle", (event) => { })
onbeforetoggle = (event) => { }
事件类型
一个 ToggleEvent。继承自 Event。
示例
下面的示例演示了 beforetoggle 事件如何用于 popover 或 <dialog> 元素。对于其他元素类型，这些示例将以类似的方式工作。
基本示例
本示例展示了如何监听 beforetoggle 事件并记录结果。
HTML
HTML 包括一个 popover 和一个用于切换其显示和隐藏的按钮。
<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");
}
});
结果
阻止 popover 打开
当元素被打开时，beforetoggle 事件是可取消的。
下面我们展示了一个 popover 如何首先检查是否允许其打开，如果不允许，则调用 Event.preventDefault() 来取消事件。在此示例中，我们使用一个按钮来设置 popover 是否可以打开：在一个更“功能齐全”的示例中，这可能取决于应用程序状态，或者 popover 中的数据是否已准备好显示。
HTML
HTML 包括一个 popover、一个用于切换其显示和隐藏的按钮，以及一个用于设置该按钮是否可以打开的按钮。
<button popovertarget="mypopover">Toggle the popover</button>
<button id="allow_button"></button>
<div id="mypopover" popover>Popover content</div>
JavaScript
首先，我们设置代码以模拟一个不允许 popover 打开的状态。这由变量 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 事件合并的说明
如果在事件循环有机会循环之前触发了多个 beforetoggle 事件，则只会触发一个事件。这被称为“事件合并”。
例如
popover.addEventListener("beforetoggle", () => {
// …
});
popover.showPopover();
popover.hidePopover();
// `beforetoggle` only fires once
其他示例
HTMLDialogElement中的 打开模态对话框 示例
规范
| 规范 |
|---|
| HTML # event-beforetoggle |
浏览器兼容性
加载中…
另见
popoverHTML 全局属性- Popover API
- 相关事件：
toggle