我之前也踩过这个坑，blur或者focusout确实没法满足需求——当对话框内部有输入框、按钮这类可聚焦元素时，焦点从对话框转移到内部元素也会触发这些事件，完全不是我们想要的“点击外部遮罩层关闭”的效果。

要实现类似Material Design对话框的点击外部关闭逻辑，其实核心思路很简单：监听对话框的点击事件，判断点击的是否是遮罩层（backdrop）区域，具体实现步骤如下：

1. 用showModal()打开对话框 #

只有调用dialog.showModal()，浏览器才会自动生成默认的遮罩层，这是实现点击外部关闭的前提（如果用show()打开，不会生成遮罩层，也就不存在“点击外部”的交互场景）。

2. 监听点击事件并判断点击区域 #

当点击遮罩层时，事件的target就是<dialog>元素本身；如果点击的是对话框内部的内容，target会是内部的具体元素。利用这个特性，我们可以在点击事件中做精准判断：

<dialog id="demoDialog">
  <h3>对话框标题</h3>
  <p>这是对话框的内容区域</p>
  <button id="closeBtn">关闭对话框</button>
</dialog>
<button id="openBtn">打开对话框</button>

const dialog = document.getElementById('demoDialog');
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');

// 打开对话框
openBtn.addEventListener('click', () => {
  dialog.showModal();
});

// 内部按钮关闭逻辑
closeBtn.addEventListener('click', () => {
  dialog.close();
});

// 点击外部遮罩层关闭逻辑
dialog.addEventListener('click', (event) => {
  // 判断点击的是否是遮罩层区域
  if (event.target === dialog) {
    dialog.close();
  }
});

补充说明 #

• 这种方案完全利用浏览器原生<dialog>的特性，不需要额外写CSS样式，现代浏览器兼容性拉满。
• 如果对话框内部有多层嵌套元素，也不用担心事件冒泡的问题——因为内部元素的target永远不会等于<dialog>本身，所以不会误触发关闭逻辑。

内容的提问来源于stack exchange，提问作者UltimatePlayTheGame