HTML Dialog：点击背景关闭对话框的实现方法

嘿，这个需求其实挺常见的，我来帮你搞定！当你用showModal()打开<dialog>时，点击外部的背景（也就是那个半透明遮罩层），默认是不会关闭对话框的，但我们可以通过监听点击事件轻松实现这个功能。

原理很简单：点击对话框背景区域时，click事件的目标(event.target)就是<dialog>元素本身；而点击对话框内部内容时，目标是内部的子元素。所以我们只需要判断如果点击的是<dialog>本身，就调用close()方法关闭它就行。

下面是修改后的完整代码，直接用就行：

<!-- HTML结构 -->
<dialog id="favDialog">
  <form>
    <p>
      <label>
        Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="showDialog">Show the dialog</button>
</p>
<output></output>

<script>
// JavaScript逻辑
const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");

// 点击按钮打开模态对话框
showButton.addEventListener("click", () => {
  favDialog.showModal();
});

// 监听点击事件，实现背景点击关闭
favDialog.addEventListener("click", (event) => {
  // 判断点击的是否为对话框背景区域
  if (event.target === favDialog) {
    favDialog.close();
  }
});
</script>

额外提一句：如果担心内部元素的事件冒泡干扰判断，也可以用event.currentTarget来对比，不过上面的写法已经能应对绝大多数场景了。

这样修改后，用户点击对话框外部的背景，对话框就会自动关闭啦，完全符合你的需求~

备注：内容来源于stack exchange，提问作者Fredy31