HTML原生alert/confirm/prompt无close事件，仅通过返回值感知关闭；才支持close/cancel事件，需手动触发自定义事件兼容旧浏览器。
HTML弹窗根本没“close事件”，别被误导了
浏览器原生的 alert()、confirm()、prompt() 弹窗，**没有 close 事件，也无法监听关闭动作**。这是很多人卡住的第一步——以为能像 window.addeventlistener('close', ...) 那样监听，结果完全不触发。
原因很简单：这些是同步阻塞式对话框，JS 执行会暂停，直到用户点按钮；它们不是 DOM 元素，也不派发事件。所谓“关闭”，只是函数返回，控制权交还 JS。
常见错误现象：
– 给 window 或 document 绑定 close、beforeunload，发现毫无反应
– 试图用 addEventListener 监听 dialog 元素的 close，但忘了自己没用 <dialog></dialog> 而是用了 alert()
如果你用的是现代 HTML 的 <dialog></dialog> 标签（非 polyfill），它才支持 close 和 cancel 事件，且行为明确：
-
close：由dialog.close()或点击dialog::backdrop触发（需modal属性） -
cancel：仅由用户按Esc键触发（即使非 modal） - 两者都可被
event.preventDefault()阻止关闭（但Esc的cancel默认可取消，close()不可取消）
示例：
<dialog id="myDialog"><p>点外面或按 Esc 关闭</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="overflowclass">Wechat Article Html</a>
<p class="overflowclass">将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<button onclick="this.closest('dialog').close()">X</button>
</dialog><script>
const dialog = document.getElementById('myDialog');
dialog.addEventListener('close', () => console.log('显式关闭'));
dialog.addEventListener('cancel', (e) => {
e.preventDefault(); // 阻止 Esc 关闭
});
dialog.showModal();
</script>
想监听 alert/confirm/prompt 关闭？只能靠函数返回值
这些原生弹窗没有事件，但有明确的返回值，这就是你唯一能依赖的信号：
-
alert()没返回值（undefined），**无法感知关闭时机**，只能把它当纯通知 -
confirm()返回true（确定）或false（取消），关闭即返回 -
prompt()返回输入字符串或null（取消），关闭即返回
所以“监听关闭”实际是“在函数调用后立刻执行后续逻辑”：
const ok = confirm('确定删除？');
if (ok) {
// 用户点了确定 → 相当于“关闭并确认”
deleteItem();
} else {
// 用户点了取消 → 相当于“关闭并放弃”
console.log('操作已取消');
}
注意：不能把后续逻辑包进回调——它们不是异步 API，没有回调参数。
兼容性与替代方案的真实取舍
<dialog></dialog> 在 Chrome 37+/Edge 79+/Firefox 98+ 支持，Safari 15.4+ 开始支持（但早期版本 bug 多）。如果要兼容 IE 或旧 Safari，别硬扛，直接换方案：
- 用第三方库（如
swal、bootbox）时，它们的then()或回调才是真正的“关闭后钩子”，不是原生事件 - 自建模态框时，务必手动触发自定义事件（如
dispatchEvent(new Event('closed'))），别幻想浏览器补全 - 误用
beforeunload拦截弹窗关闭？它只对页面卸载生效，和弹窗无关，还会被现代浏览器限制
最常被忽略的一点：很多开发者花半天查“如何监听 alert 关闭”，其实问题根本不该用 alert —— 它不可定制、不可样式化、阻塞主线程。真要交互，<dialog></dialog> 或轻量级组件才是正解，而“监听关闭”只是它能力的自然结果，不是需要单独攻克的难题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
