设置盒子点击盒子之外的地方隐藏
时间: 2024-02-11 07:07:06 浏览: 137
点击页面其它地方隐藏该div的两种思路
你可以使用 JavaScript 监听文档的点击事件,当点击事件发生时,判断该事件的目标元素是否是你要隐藏的盒子,如果不是,则隐藏该盒子。以下是一个示例代码:
```javascript
// 获取要隐藏的盒子
const box = document.getElementById('box');
// 监听文档的点击事件
document.addEventListener('click', event => {
const target = event.target;
// 判断点击的目标元素是否是要隐藏的盒子
if (target !== box && !box.contains(target)) {
// 隐藏盒子
box.style.display = 'none';
}
});
```
在这个示例代码中,我们首先获取要隐藏的盒子。然后,我们使用 `document.addEventListener` 监听文档的点击事件。在点击事件发生时,我们获取点击的目标元素,并判断该元素是否是要隐藏的盒子或者该元素是否在要隐藏的盒子内部。如果不是,则将要隐藏的盒子隐藏起来。
阅读全文