HTML dialog元素新支持了closedBy属性
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12102
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。
一、长话短说
不知道大家用过<dialog>元素没有，我是使用了很多年了，挺好用的。
对于基础特性，各大浏览器都已经支持不错了。
但是，还不完美，且看下面这个场景。
请问，如果我们希望<dialog>弹框模态显示的时候，点击后面的半透明黑色蒙层关闭弹框，请问如何实现？
在之前，这个需求需要用到JS，但是现在，只需要一个HTML属性就可以实现了，这个属性就是closedBy属性。
比方说下面这个弹框HTML元素：
<dialog closedBy="any">点击蒙层我会隐藏哦~</dialog>
此时，如果我们执行dialog.showModal()让弹框显示，那么点击后面的蒙层弹框就会自动关闭。
眼见为实，你可以试试点击下面的按钮元素（Safari暂不支持），体验我所描述的效果：
二、closedBy属性的语法
closedby 属性是一个枚举属性，支持以下三个关键值：
| 属性值 | 描述 | 关闭方式 |
|---|---|---|
| any | 全部允许 | 点击对话框外部（背景）、按 Esc 键或者调用 close() 方法。 |
| closerequest | 需要请求 | 按 Esc 键、调用 close() 方法；但不能通过点击外部关闭。 |
| none | 禁止自动关闭 | 只能通过 JavaScript 的 close()方法或表单提交关闭（我的书《HTML并不简单》有过具体介绍）；Esc 和点击外部均无效。 |
具体的行为表现
如果我们没有设置closedBy属性，浏览器会当做auto处理。
也就是：
- 如果弹框元素是使用
showModal()方法打开的，那么等同于设置了closedBy="closerequest"，也就是按下ESC键可以关闭，但是点击蒙层不行； - 如果弹框元素是使用
show()方法打开的，那么弹框的关闭行为等同于设置了closedBy="none"。
另外，closedBy属性也支持在DOM API层面直接读写，例如：
// 获取closedBy的属性值 (注意驼峰命名) console.log(dialog.closedBy); // 设置closedBy属性 dialog.closedBy = 'none';
三、好了，就这么点内容
最后看下兼容性：
目前Safari浏览器并不支持，若想在实际项目中使用，可以引入Polyfill：https://github.com/tak-dcxi/dialog-closedby-polyfill
使用非常简单：
import { apply, isSupported } from "dialog-closedby-polyfill";
if (!isSupported()) {
apply();
}
其他就没什么了吧，感谢阅读，我们下篇文章再见！
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12102
（本篇完）
