HTML dialog closedby 如何区分 Esc、点击外部与强制关闭：关闭原因和兼容降级

做设置弹窗时，最容易混淆的是“用户怎么关”和“代码怎么关”。HTML 原生

的 closedby 属性把这件事分成了三档：只允许开发者关闭、允许 Esc、允许 Esc 加点击外部。下面用同一个页面跑一遍，重点看 closedBy、close 事件和 returnValue 能不能对上。

先把三种关闭边界摆在一起

MDN 将 closedby 定义为用户动作的关闭范围：none 只留开发者指定机制，closerequest 再加平台关闭请求（桌面通常是 Esc），any 还包括点击或触摸对话框外部的轻量关闭。Chrome 134 的发布说明也记录了这三个值。

值	Esc	点击外部	按钮调用 close()	适合场景
none	否	否	是	必须明确确认的流程
closerequest	是	否	是	设置、编辑、可取消表单
any	是	是	是	提示、筛选、轻量预览

准备同一个浏览器验收页面

把三个

放在同一页，每个按钮只负责 showModal()，关闭按钮统一调用 close('button')。页面还监听 close 事件，把 returnValue 写入日志。这样可以区分“没有关掉”和“确实触发了关闭”。

允许 Esc、点击外部和按钮关闭
  关闭

按动作逐个验证关闭结果

none：外部点击和 Esc 都应留下对话框

打开 none 后先点对话框外，再按 Esc。只要对话框仍在，日志没有新增 close 事件，就说明用户动作被拒绝；点击“按钮关闭”后才应出现 returnValue=button。

closerequest：Esc 可以关，外部点击不能关

这个值适合编辑弹窗：用户按 Esc 可以放弃当前查看，但误点页面空白处不应丢失正在编辑的内容。验收时先外部点击，再按 Esc，最后重复按钮关闭，分别观察对话框状态和日志。

any：三条路径都可以关

打开 any 后点对话框外，应该立即触发 close。再次打开并按 Esc 也应关闭；按钮路径则会留下显式的 returnValue=button，便于业务代码区分用户取消和确认按钮。

生产代码里的兼容与回退

closedby 不是所有浏览器都支持。可以先用 'closedBy' in HTMLDialogElement.prototype 做能力判断；不支持时仍保留显式关闭按钮，并避免把点击外部当成必须存在的业务动作。对于必须确认的表单，默认按 none 的安全边界设计，缺少新属性时也不会因为误点而丢数据。

const supportsClosedBy = 'closedBy' in HTMLDialogElement.prototype;
if (!supportsClosedBy) {
  // 继续显示显式关闭/取消按钮，不依赖轻量关闭
}

常见问题

closedby 和 close() 是一回事吗？

不是。closedby 限制用户动作，close() 是开发者指定的关闭机制，三种值都不影响按钮调用 close()。

为什么按 Esc 后 returnValue 不是 button？

因为 Esc 不是按钮传入的返回值。需要区分路径时，给按钮调用 close('button')，再在 close 事件中读取 returnValue。

点击外部没有关闭，应该先查什么？

先查属性是否确实是 closedby="any"，再确认用的是 showModal() 打开，并在目标浏览器里检查 closedBy 能力。

验收结论

把弹窗按“是否允许误触关闭”分类，再选择 none、closerequest 或 any。无论选哪档，都保留显式按钮和 close 事件日志；这比只看弹窗消失更容易发现兼容问题。