原生dialog点击外部不会自动关闭，必须手动监听document点击并判断e.target是否在dialog外且dialog.open为true，同时需在dialog上stopPropagation以防止误关。
dialog点击外部关闭的默认行为不存在
原生 <dialog> 标签不会自动响应点击背景（即“空白处”）关闭，这是常见误解。它只在调用 close()、按 Esc 键，或显式调用 showModal() 后点击 backdrop（但注意：backdrop 本身不可点，需手动监听）时才可能关闭 —— 实际上，click 事件**不会冒泡到 backdrop 元素**，因为 backdrop 是伪元素（::backdrop），无法直接绑定事件。
监听 document 点击并判断点击位置
最可靠的做法是监听 document 的 click，检查点击是否落在 <dialog> 外部且 dialog 处于打开状态：
dialog.addEventListener('click', e => {
// 阻止点击 dialog 内容时冒泡触发关闭
e.stopPropagation();
});
document.addEventListener('click', e => {
if (dialog.open && !dialog.contains(e.target)) {
dialog.close();
}
});
关键点：
-
dialog.open是只读属性，比检查hasAttribute('open')更准确 - 必须加
e.stopPropagation()在 dialog 上，否则点击内部也会触发 document 的 handler - 不能用
e.target === dialog判断，因为点击的是 backdrop 区域，e.target是<body>或其子元素，不是 backdrop
避免误关：排除表单控件和 shadow DOM
如果 dialog 内含 <input>、<select> 或自定义组件（尤其用了 Shadow DOM），dialog.contains(e.target) 可能返回 false，导致点击输入框时意外关闭。应对方式：
立即学习“前端免费学习笔记（深入）”；
- 对 focusable 元素单独处理：
if (e.target.matches('input, select, textarea, button, [contenteditable]')) return - 若用 Shadow DOM，需用
e.composedPath()[0]替代e.target判断归属 - 可加 class 如
data-no-close="true"主动标记不触发关闭的区域
移动端 click 延迟与 touchstart 替代方案
在 iOS Safari 等环境下，click 有约 300ms 延迟，且 backdrop 点击可能不触发。更稳妥的是监听 touchstart 并降级 fallback：
const closeOnOutside = e => {
if (dialog.open && !dialog.contains(e.target)) dialog.close();
};
document.addEventListener('click', closeOnOutside);
document.addEventListener('touchstart', closeOnOutside, { passive: true });
注意：
- 加
{ passive: true }避免移动端滚动阻塞 - 不要同时监听
click和touchstart后再preventDefault()，容易引发兼容问题 - 部分安卓 WebView 对
::backdrop支持弱，依赖 document 级监听是最兼容路径
z-index + getBoundingClientRect() 做层叠判断，但那已超出基础点击关闭范畴。 
