大量dialog点击外部关闭仅首个生效，如何实现通用的对话框关闭逻辑？

问题根因 #

你原有代码的问题出在两点：

1. closeDialog函数中使用document.querySelector('dialog')只会匹配页面中第一个dialog元素，所以第二个及之后的对话框永远不会绑定到点击关闭的事件逻辑，这就是第二个对话框点外部关不掉的原因。
2. 手动给每个dialog加onclick属性的实现方式效率极低，不适合你后续新增上百个同类对话框的场景。

实现方案 #

第一步：简化HTML结构 #

所有dialog不需要再手动加onclick属性，保持统一结构即可：

<!-- BOB JONES -->
<dialog id="B-JONES">
  <div class="test">
    <p>Blah blah blah</p>
  </div>
</dialog>
<!-- END BOB JONES -->
<!-- ROBERT ABREAU -->
<dialog id="R-ABREAU">
  <div class="test">
    <p>Blah blah blah</p>
  </div>
</dialog>
<!-- END ROBERT ABREAU -->
<!-- 后续150+个dialog都可以按这个结构编写，不需要添加额外属性 -->

第二步：替换JS逻辑 #

这里提供两种适配不同场景的实现：

方案1：静态dialog批量绑定（适合所有dialog都是页面初始就加载好的场景）

你可以按照需求用getElementsByClassName替换选择器，只要给所有dialog加统一类名即可：

document.addEventListener('DOMContentLoaded', function() {
  // 若使用类名选择，替换为document.getElementsByClassName('你给dialog加的统一类名')
  const allDialogs = document.querySelectorAll('dialog');
  allDialogs.forEach(dialog => {
    dialog.addEventListener('click', function(e) {
      // 点击区域为dialog外部（非内部test内容块）时关闭对话框
      if (!e.target.closest('div.test')) {
        dialog.close();
      }
    });
  });
});

方案2：事件委托（适合后续会动态新增dialog的场景）

这个方案不需要给每个dialog单独绑定事件，就算后续新增上百个dialog也不需要修改JS代码：

document.addEventListener('click', function(e) {
  // 判断点击元素是否为dialog本身
  if (e.target.tagName === 'DIALOG') {
    if (!e.target.closest('div.test')) {
      e.target.close();
    }
  }
});

方案优势 #

• 完全省去给每个dialog加onclick属性的重复工作
• 所有对话框都会自动适配外部点击关闭逻辑，不会出现只有第一个生效的问题
• 事件委托方案天然支持动态新增的对话框，后续扩展不需要调整JS逻辑

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