如何实现仅桌面端生效的函数？移动端适配方案咨询

你的代码只在页面初始化时判断一次窗口宽度，一旦用户后续调整窗口大小（比如移动端横屏）或者设备切换模式（比如二合一笔记本），监听器不会动态更新，导致移动端可能触发事件。下面是修复方案：

第一步：封装设备判断函数 #

先写一个可靠的桌面端判断逻辑，结合窗口宽度和触摸设备检测（避免误判二合一设备）：

// 判断是否为桌面端
function isDesktop() {
  const MIN_DESKTOP_WIDTH = 1000;
  // 检测是否为触摸设备
  const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  // 宽度达标且非触摸设备（可根据需求调整判断逻辑）
  return window.innerWidth >= MIN_DESKTOP_WIDTH && !isTouchEnabled;
}

第二步：管理事件监听器 #

要保存防抖后的函数引用，否则无法正确移除监听器：

// 保存防抖后的函数，方便后续移除
const debouncedInactiveUser = debounce(inactiveUser, 10000);

// 动态添加/移除mousemove监听器的函数
function updateMouseMoveListener() {
  if (isDesktop()) {
    document.addEventListener('mousemove', debouncedInactiveUser);
  } else {
    document.removeEventListener('mousemove', debouncedInactiveUser);
  }
}

// 初始化时设置监听器
updateMouseMoveListener();
// 监听窗口大小变化，实时更新监听器
window.addEventListener('resize', updateMouseMoveListener);

第三步：原函数保留（无需修改） #

你的inactiveUser函数可以保持不变：

const inactiveUser = () => {
  console.log("mouse move on desktop only");
  sendEvent({
      action: "Inactive Checkout",
  });
};

仅移动端生效的函数实现参考 #

用类似的逻辑，封装移动端判断和事件管理：

// 判断是否为移动端
function isMobile() {
  const MAX_MOBILE_WIDTH = 999;
  const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  // 宽度小于阈值，或者是触摸设备
  return window.innerWidth <= MAX_MOBILE_WIDTH || isTouchEnabled;
}

// 仅移动端触发的示例函数
const mobileOnlyHandler = () => {
  console.log("仅移动端触发的操作");
  // 执行移动端专属逻辑，比如触摸事件处理
};

// 动态管理移动端事件监听器（以touchstart为例）
function updateMobileListener() {
  if (isMobile()) {
    document.addEventListener('touchstart', mobileOnlyHandler);
  } else {
    document.removeEventListener('touchstart', mobileOnlyHandler);
  }
}

// 初始化+监听窗口变化
updateMobileListener();
window.addEventListener('resize', updateMobileListener);

关键注意点 #

• 必须保存事件处理函数的引用（比如防抖后的debouncedInactiveUser），否则removeEventListener无法找到对应函数，导致监听器无法移除。
• 结合触摸设备检测比单纯判断宽度更可靠，避免二合一设备或移动端横屏时的误判。

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