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

Question

使用材质设计lite库来创建基本上使用底层元素的对话框,<dialog>有没有办法通过单击它的背景来关闭对话框？(当单击对话框内容本身时,不应该将其解除).

<dialog>Hi</dialog>    
<button>show</button>

document.querySelector("button").addEventListener("click",
  () => document.querySelector("dialog").showModal());

https://jsfiddle.net/fyjbvbqq/

在显示对话框时单击屏幕上的任何位置对应于单击dialog元素,因此似乎没有简单的方法来确定是否单击了背景...有没有办法执行此操作？

Answer 1

您可以使用Element.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>