Hello! 欢迎来到小浪云数据!

如何避免点击指定元素外部区域时触发操作?


如何避免点击指定元素外部区域时触发操作?

避免点击指定元素外部触发的难题

在前端开发中,有时我们需要避免点击特定元素外部区域时触发某些操作。以下代码展示了一个示例,其中如何防止点击两个指定的 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 = '点击白色的区域才能进来';   } });
登录后复制

通过使用封装函数,我们可以更轻松地处理多个指定元素,并确保点击这些元素外部区域时触发预期的操作。

相关阅读