如何用JS/CSS实现点击Div外及切换标签页时隐藏按钮？

原代码仅监听了文档内的click事件，无法响应切换标签页或窗口的操作，因此需要补充监听文档可见性变化的事件来覆盖这类场景：

优化后的代码 #

// 提前获取DOM元素，避免重复查询提升性能
const box = document.querySelector('#box');
const btn = document.querySelector('#btn');

// 处理当前文档内的点击逻辑
document.addEventListener('click', (event) => {
  if (!box.contains(event.target)) {
    btn.style.display = 'none';
  } else {
    btn.style.display = 'initial';
  }
});

// 监听文档可见性变化，处理切换标签页/窗口的情况
document.addEventListener('visibilitychange', () => {
  // 当文档变为不可见时，直接隐藏按钮
  if (document.hidden) {
    btn.style.display = 'none';
  }
});

代码说明 #

• 提前缓存#box和#btn元素，减少重复DOM查询的开销。
• 保留原有的click事件监听，处理当前文档内点击Div外部的场景。
• 添加visibilitychange事件监听：当用户切换到其他标签页、最小化窗口或使文档处于不可见状态时，document.hidden会变为true，此时自动隐藏按钮。

切回当前文档后，按钮会保持隐藏状态，直到用户点击Div区域才会重新显示，符合需求逻辑。

内容的提问来源于stack exchange，提问作者Tuckedo