在前端开发中，我们经常需要实现一些元素的关闭功能。比如弹出框、下拉菜单等，通常情况下我们都会添加一个“关闭”或“取消”按钮，但是有时候用户可能会忘记点击这个按钮，导致元素一直处于打开状态。为了解决这个问题，我们可以通过单击元素外部来关闭元素。本文将介绍如何实现这个功能。
事件委托
首先，我们需要了解事件委托。事件委托就是利用事件的冒泡机制，把事件绑定到父元素上，然后通过判断事件源（event.target）来处理事件。这种方式不仅可以减少事件绑定的次数，还可以避免由于动态生成的子元素而引起的事件失效问题。例如：
--- --------------- ---------- ---------- ---------- -----
如果我们要为每个 li 元素添加点击事件，可以这样写：
--- --- - --------------------------------
--- ---- - - -- - - ----------- ---- -
-------------------------------- -------- -- -
----------------------------
---
-但是如果我们动态添加了一个 li 元素，它并没有被添加事件，需要再次手动添加。如果使用事件委托，就可以避免这个问题：
--- --------- - -------------------------------------
----------------------------------- -------- ------- -
-- ----------------------------------- --- ----- -
------------------------------------
-
---这样无论是原先的 li 元素还是后来添加的 li 元素，都会被绑定点击事件。
单击关闭元素
有了事件委托的基础，我们就可以开始实现单击关闭元素功能了。首先，我们需要添加一个监听器，当用户单击页面的时候检查点击的元素是否是要关闭的元素或者它的父级元素。如果不是，就把要关闭的元素隐藏。代码如下：
---------------------------------- -------- ------- -
--- ------ - -------------
--- --- - -------------------------------
-- ------------------- -------- - -- ---------- --- --
----------------- - -------
-
---
-------- -------------------- ------ - -- -- ----- --- ------ -----
--- ---- - -----------------
----- ----- -- ----- -
-- ----- -- ------- -
------ -----
-
---- - ----------------
-
------ ------
-这段代码中，isDescendant 函数用于判断一个元素是否是另一个元素的后代节点。我们遍历 child 元素的所有祖先节点，如果其中有一个节点等于 parent，就说明 child 是 parent 的后代节点。
这样就可以实现单击关闭元素的功能了。不过，这种方法有一些缺陷。比如，如果我们要实现多个元素同时关闭，就需要分别添加事件监听器，代码会变得很冗长。此外，如果要判断的元素嵌套层级很深，代码也会变得很复杂。因此，在实际开发中，我们可以采用更加通用的方法来实现单击关闭元素功能。
通用解决方案
为了解决上述问题，我们可以使用一个通用的解决方案：给整个页面添加一个监听器，当用户点击时检查被点击的元素是否是要关闭的元素或者它的后代元素。具体代码如下：
---------------------------------- -------- ------- - --- ------ - ------------- --- ----- - ---------------------------------- --- ---- - - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------