避免点击指定元素外部触发的难题
在前端开发中，有时我们需要避免点击特定元素外部区域时触发某些操作。以下代码展示了一个示例，其中如何防止点击两个指定的 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 = '点击白色的区域才能进来'; }});
登录后复制
通过使用封装函数，我们可以更轻松地处理多个指定元素，并确保点击这些元素外部区域时触发预期的操作。
以上就是如何避免点击指定元素外部区域时触发操作？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2804765.html
