如何判断是否离开文档/浏览器范围？文件选择模态框失焦监听方法

好问题！浏览器本身并没有专门针对系统文件选择框弹出的原生事件，但我们可以结合现有浏览器事件来实现你需要的通知效果，同时也能准确判断文档或浏览器是否处于失焦/不可见范围。

一、捕获文件选择模态框弹出的时机 #

当你点击input[type="file"]时，系统模态框弹出会导致浏览器窗口失去焦点，我们可以通过标记+窗口失焦事件来区分这是文件选择框导致的失焦，而不是用户切换到其他窗口/标签页：

1. 首先给文件输入框绑定click事件，设置一个标记变量，标记“即将打开文件选择框”；
2. 监听window.blur事件，当触发时如果标记为true，就说明是文件选择框弹出导致的浏览器失焦；
3. 最后在用户完成选择（change事件）或取消选择（输入框重新获得focus事件）时，重置标记。

示例代码：

const fileInput = document.querySelector('input[type="file"]');
let isFileDialogOpen = false;

// 标记：用户点击了文件输入框，即将弹出系统选择框
fileInput.addEventListener('click', () => {
  isFileDialogOpen = true;
});

// 监听窗口失焦事件
window.addEventListener('blur', () => {
  if (isFileDialogOpen) {
    console.log('系统文件选择框已弹出，浏览器失去焦点');
    // 这里可以执行你的通知逻辑，比如触发自定义事件、显示提示等
  }
});

// 重置标记：用户选择了文件后
fileInput.addEventListener('change', () => {
  isFileDialogOpen = false;
});

// 重置标记：用户取消了文件选择（输入框重新获得焦点）
fileInput.addEventListener('focus', () => {
  isFileDialogOpen = false;
});

二、判断是否离开文档/浏览器范围 #

如果需要更精准地判断文档是否处于不可见状态（不管是弹出系统模态框、切换标签页、最小化窗口），推荐使用document.visibilitychange事件，它能直接反映文档的可见性状态：

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('文档已不可见（可能是弹出文件选择框、切换标签、最小化窗口等）');
    // 结合之前的标记，还能进一步判断是否是文件选择框导致的
    if (isFileDialogOpen) {
      console.log('具体原因：系统文件选择框弹出');
    }
  } else {
    console.log('文档重新回到可见状态');
  }
});

注意事项 #

• window.blur事件会在所有导致窗口失焦的场景触发（比如用户切到其他应用），所以必须结合文件输入框的标记来区分是否是文件选择框导致的；
• 部分浏览器中，当用户取消文件选择时，input[type="file"]会重新获得焦点，因此监听focus事件来重置标记很有必要；
• document.visibilitychange的兼容性极好，几乎所有现代浏览器都支持，是判断文档可见性的首选方案。

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