通过JavaScript检测手机使用状态及排除来电误判方案问询

嘿，这个场景我之前也遇到过——用blur/focus确实会把系统事件（比如来电、系统弹窗）误判成用户主动操作，给你几个实用的解决方案，亲测有效：

方案一：触摸事件+焦点状态联动判断 #

核心思路是：用户主动操作手机一定会触发触摸事件，而系统事件（来电）不会。我们可以通过记录最近是否有用户交互，来过滤掉系统触发的页面失焦。

// 标记是否有用户主动交互
let hasUserInteraction = false;
// 冷却时间：触发提示后，N秒内不再重复触发（根据你的需求调整）
const COOLDOWN = 10 * 60 * 1000; // 10分钟
let isInCooldown = false;

// 监听手机端的触摸开始事件（用户主动操作的核心标志）
document.addEventListener('touchstart', () => {
  hasUserInteraction = true;
  // 5秒后重置标记，避免用户只是碰了一下屏幕但没切后台的误判
  setTimeout(() => {
    hasUserInteraction = false;
  }, 5000);
});

// 监听页面失焦事件
$(window).on('blur', () => {
  // 只有在有用户交互且不在冷却期时，才触发提示
  if (hasUserInteraction && !isInCooldown) {
    alert('您已使用手机');
    // 重置交互标记
    hasUserInteraction = false;
    // 开启冷却期
    isInCooldown = true;
    setTimeout(() => {
      isInCooldown = false;
    }, COOLDOWN);
  }
});

这个方案的优势是简单直接，兼容性好，几乎所有手机浏览器都支持。来电时，系统直接把页面切到后台，不会触发touchstart事件，因此hasUserInteraction保持为false，不会误触发提示。

方案二：Page Visibility API + 交互标记（更精准） #

Page Visibility API是浏览器提供的专门检测页面可见状态的API，比blur/focus更可靠——它能明确区分页面是被切换到后台（document.hidden = true），还是只是失去焦点（比如弹出键盘时页面并没有完全隐藏）。

结合用户交互标记，能进一步提升准确性：

let hasUserInteraction = false;
const COOLDOWN = 10 * 60 * 1000;
let isInCooldown = false;

document.addEventListener('touchstart', () => {
  hasUserInteraction = true;
  setTimeout(() => hasUserInteraction = false, 5000);
});

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  // 当页面从可见变为隐藏，且有用户交互记录时触发提示
  if (document.hidden && hasUserInteraction && !isInCooldown) {
    alert('您已使用手机');
    hasUserInteraction = false;
    isInCooldown = true;
    setTimeout(() => isInCooldown = false, COOLDOWN);
  }
});

这个方案更适合需要精准判断页面是否真的被用户切换后台的场景，避免了一些边缘情况（比如弹出系统键盘导致的blur误判）。

补充：进阶优化思路 #

如果需要更严格的检测，可以考虑：

• 监听更多用户交互事件：比如touchmove、click，覆盖更多操作场景；
• 调整交互标记的超时时间：根据你的需求，把5秒改成更合适的时长，比如2秒，减少误判概率；
• 结合加速度传感器（DeviceMotionEvent）：用户主动操作手机时通常会有轻微的姿态变化，但这个需要用户授权，且可靠性不如触摸事件，适合作为补充判断。

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