Question

我正在尝试在Angular中实现自定义弹出窗口。问题是在打开时单击弹出窗口外部我不知道如何在没有叠加的情况下轻松实现它。我发现在基于jQuery的库中使用.closest函数是常见的，但我无法以普通的Javascript方式找到替代方法。

Answer 1

您的任务并不需要closest方法。为了能够在点击它之外的任何地方关闭弹出窗口，你应该在body（或document）元素上绑定一个click事件处理程序，如果在那里检测到这个事件，则关闭弹出窗口。

由于点击事件冒泡DOM树，最终到达最顶层的元素，例如body，它将起作用。

然后确保在事件初始化弹出窗口时阻止事件传播，因为您没有单击事件来到达正文（如果处理那里弹出窗口将被关闭）。为此，您在popup容器上再绑定一个click事件，当它发生时，您可以阻止其进一步传播：

e.stopPropagation();

因此，当您与弹出窗口及其内容进行交互时，单击内部，执行某些操作时，单击事件永远不会到达正文，因此弹出窗口永远不会关闭。但是一旦你点击弹出窗口外 - 冒泡点击事件将由body处理程序处理，并将关闭弹出窗口。