dialog元素默认不触发cancel事件，必须先调用showmodal()进入模态状态；cancel仅在esc或点击backdrop时触发，show()模式下无效，且仅支持chrome 97+、firefox 111+、safari 15.4+。
dialog 元素默认不触发 cancel 事件
直接给 <dialog></dialog> 绑定 cancel 事件监听器是无效的——除非你先调用 showModal()。这是最容易卡住的地方：很多人在 show() 模式下测试，发现 cancel 事件根本不会触发。
原因在于：cancel 事件只在模态（modal）状态下、用户按 Esc 或点击 backdrop（背景遮罩）时触发；而 show() 是非模态的，没有 backdrop，也无法通过 Esc 关闭。
- ✅ 正确做法：必须用
dialog.showModal() - ❌ 错误写法：
dialog.show()+ 监听cancel - ⚠️ 注意：
cancel是原生事件，不需要 polyfill，但仅支持 Chrome 97+、Firefox 111+、Safari 15.4+（iOS 15.4+）
监听 cancel 事件的最小可行代码
绑定方式和普通事件一样，但时机很重要：建议在调用 showModal() 前就加监听，避免因执行顺序漏掉首次触发。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<dialog id="myDialog"><p>点 ESC 或点背景试试</p>
<button id="closeBtn">关闭</button>
</dialog><script>
const dialog = document.getElementById('myDialog');
// ✅ 提前绑定，不依赖 DOM 加载顺序
dialog.addEventListener('cancel', (e) => {
e.preventDefault(); // 可选：阻止默认关闭行为（比如想弹确认框）
console.log('用户试图取消对话框');
});
// ✅ 必须用 showModal()
dialog.showModal();
document.getElementById('closeBtn').onclick = () => dialog.close();
</script>
cancel 与 close 的行为差异
cancel 和 close 是两个独立事件，触发条件不同，不能互相替代：
-
cancel：仅由用户主动中断（Esc / 点 backdrop）触发，不会由dialog.close()或dialog.returnValue = 'xxx'; dialog.close();触发 -
close：所有关闭途径都会触发（包括close()、cancel、submit表单提交等） - 如果你需要统一处理“对话框关闭”，监听
close更稳妥；如果只想拦截用户放弃操作的行为，才用cancel -
preventDefault()在cancel中有效（可阻止关闭），但在close中无效
兼容性 fallback 和常见陷阱
目前 Safari 对 cancel 事件的支持虽已落地，但仍有细节差异：比如 iOS Safari 15.4–16.3 在某些页面缩放或 iframe 场景下可能不触发 backdrop 点击的 cancel。
- 不要依赖
event.target === dialog判断来源，cancel事件的target就是 dialog 元素本身 - 避免在
cancel回调里再调dialog.showModal()—— 这会引发 Safari 的渲染异常或无限循环 - 如需兼容旧浏览器，得手动模拟：
document.addEventListener('keydown', e => e.key === 'Escape' && yourDialogLogic())，并自行管理 backdrop 点击 - 注意：CSS
backdrop-filter不影响cancel事件触发，但若 backdrop 被pointer-events: none遮挡，则点击不会触发cancel
cancel 就静默失效，连控制台都不会报错。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
