通过单击背景来消除html对话框元素

Dismiss html dialog element by clicking the backdrop

本文关键字：html 对话框 元素 单击 背景      更新时间：2023-09-26

使用material design life库创建对话框，它本质上使用底层的<dialog>元素，是否有任何方法通过点击其背景来关闭对话框?(当点击对话框内容时，它应该而不是被取消)。

<dialog>Hi</dialog>    
<button>show</button>
document.querySelector("button").addEventListener("click",
  () => document.querySelector("dialog").showModal());
https://jsfiddle.net/fyjbvbqq/

当显示对话框时，单击屏幕上的任何地方对应于单击dialog元素，因此似乎没有简单的方法来确定背景是否被单击…有办法做到这一点吗?

您可以使用元素。getBoundingClientRect获取对话框的大小和位置，并测试当前客户端坐标是否在此区域内:

document.querySelector("button").addEventListener("click", () => document.querySelector("dialog").showModal());
document.querySelector("dialog").addEventListener("click", (e) => {
  var rect = e.target.getBoundingClientRect();
  var minX = rect.left + e.target.clientLeft;
  var minY = rect.top + e.target.clientTop;
  if ((e.clientX < minX || e.clientX >= minX + e.target.clientWidth) ||
      (e.clientY < minY || e.clientY >= minY + e.target.clientHeight)) {
    e.target.close();
  }
});
<dialog>Hi</dialog>
<button>
    show
</button>

当前处理这个问题的一个简洁的方法是:

dialog.addEventListener('click', ({target:dialog}) => {
    if (dialog.nodeName === 'DIALOG') {
        dialog.close('dismiss');
    }
});

这是有效的，因为点击对话框本身将有对话框内容的nodeName(例如P, FORM等)，而点击背景将有DIALOG的nodeName。

来源:"加光解雇"在web.dev

相关文章：