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

发布日期： 2024-11-06 阅读量： 作者： 网络

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

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

# ai # 点击事件

上一篇: Golang 函数中的多线程和并发处理

下一篇: PHP 函数与 C 函数的比较

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

随便看看