避免点击指定元素外部触发的难题
在前端开发中，有时我们需要避免点击特定元素外部区域时触发某些操作。以下代码展示了一个示例，其中如何防止点击两个指定的 DOM 元素（app1 和 app2）之外时触发在 view 元素中添加文本：
// 获取指定 DOM 元素
const app1El = document.querySelector('.app1');
const app2El = document.querySelector('.app2');
// 监听点击事件
document.addEventListener('click', (e) => {
// 判断点击目标是否包含在指定元素中
if (!app1El.contains(e.target) && !app2El.contains(e.target)) {
// 如果点击目标不在指定元素内，则在 view 元素中添加文本
document.querySelector('.view').innerHTML = '点击白色的区域才能进来';
}
});然而，当我们需要处理多个指定元素时，直接遍历这些元素可能会带来一些问题。为了解决这个问题，我们可以封装一个函数来实现这个功能：
function isClickInQueryDom(doms = [], callback) {
if (!doms.length) return new Error('未传入指定节点');
document.addEventListener('click', (e) => {
// 遍历指定元素并判断点击目标是否包含在其中
const flag = doms.some((dom) => !dom.contains(e.target));
callback && callback(flag);
});
}
// 调用封装函数
isClickInQueryDom([app1El, app2El], (flag) => {
if (flag) {
document.querySelector('.view').innerHTML = '点击白色的区域才能进来';
}
});通过使用封装函数，我们可以更轻松地处理多个指定元素，并确保点击这些元素外部区域时触发预期的操作。
