在前端开发中，我们经常需要使用 JavaScript 来实现交互效果。其中一个案例就是当用户点击页面上的某个元素后，隐藏另一个元素。但是，在这种情况下，如何才能在用户点击页面上除了要隐藏的元素之外的其他地方时，隐藏该元素呢？本文将介绍如何实现此功能。
事件冒泡和捕获
在理解如何隐藏元素之前，我们需要了解一些关于事件处理程序的基础知识。在 DOM 中，事件可以在元素内部传播（称为“事件冒泡”）或从父级元素向子级元素传播（称为“事件捕获”）。默认情况下，事件会在触发事件的元素上进行处理，然后在 DOM 树中向上冒泡，直到达到文档对象为止。
监听 document 点击事件
要实现在点击 div 外部时隐藏 div 的功能，我们可以监听 document 上的 click 事件，并检查目标元素是否与要隐藏的元素相同。如果不同，则隐藏该元素。以下是一个示例代码：
const div = document.querySelector('#myDiv');
document.addEventListener('click', (event) => {
if (!div.contains(event.target)) {
div.style.display = 'none';
}
});首先，我们获取要隐藏的 div 元素。然后，我们将 click 事件处理程序添加到 document 上。在事件处理程序内部，我们检查点击事件的目标元素是否是 div 元素或其子元素。如果不是，则隐藏该元素。
监听父级元素的点击事件
上面的代码有一个问题：无论何时用户单击页面上的任何元素，都会调用事件处理程序。为了避免这种情况，我们可以将 click 事件处理程序添加到 div 的父元素上，并阻止事件冒泡到 document。以下是一个示例代码：
-- -------------------- ---- -------
----- --------- - -------------------------------------
----- --- - ---------------------------------
----------------------------------- ------- -- -
-- ----------------------------- -
----------------- - -------
-
---
----------------------------- ------- -- -
------------------------
---首先，我们获取 div 的父元素 container。然后，我们将 click 事件处理程序添加到 container 上。在事件处理程序内部，我们检查点击事件的目标元素是否是 div 元素或其子元素。如果不是，则隐藏该元素。
最后，我们将 click 事件处理程序添加到 div 上，并使用 stopPropagation 方法阻止事件冒泡到 container 和 document。
结论
通过监听 document 或父级元素的点击事件，并检查目标元素是否与要隐藏的元素相同，我们可以轻松地实现在点击 div 外部时隐藏 div 的功能。此技术在许多网页应用中都很常见，例如下拉菜单、模态框等。
希望本文能够对学习前端的读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31290