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

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

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

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

以上就是如何避免点击指定元素外部区域时触发操作？的详细内容，更多请关注其它相关文章！