避免点击指定元素外部触发的难题
在前端开发中,有时我们需要避免点击特定元素外部区域时触发某些操作。以下代码展示了一个示例,其中如何防止点击两个指定的 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 = '点击白色的区域才能进来'; } });
登录后复制
通过使用封装函数,我们可以更轻松地处理多个指定元素,并确保点击这些元素外部区域时触发预期的操作。