Question

使用材质设计精简版库创建dialogs，它基本上使用底层的<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>

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

1 个答案: