通过单击背景关闭 html 对话框元素答案

【问题标题】：Dismiss html dialog element by clicking the backdrop通过单击背景关闭 html 对话框元素
【发布时间】：2017-02-22 23:20:42
【问题描述】：

使用material design lite library创建dialogs，它本质上使用底层<dialog>元素，有没有办法通过点击它的背景来关闭对话框？（当点击对话框内容本身时，它应该不被关闭）。

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

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

https://jsfiddle.net/fyjbvbqq/

显示对话框时单击屏幕上的任意位置对应于单击dialog 元素，因此似乎没有简单的方法来确定是否单击了背景...有没有办法做到这一点？

【问题讨论】：

标签： javascript jquery html

【解决方案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>

【讨论】：

这非常接近，但我想我想要与此相反的逻辑（单击背景关闭；当我运行你的 sn-p 时，我必须单击对话框本身才能关闭它）
@ExplosionPills 已修复。对不起我的英语，我的理解正好相反。现在，只需点击外部，对话框就会被关闭。
谢谢！我看到的唯一问题是边界框边框也可以单击以关闭模式，但这没什么大不了的。只是想知道是否有一种简单的方法来处理它