JavaScript实现点击事件仅在移动端生效的resize函数问题

原代码存在两个核心缺陷：

• 窗口 resize 到小屏（≤1100px）时，会重复绑定点击事件，导致点击一次触发多次回调逻辑
• 窗口从小屏放大到大屏（>1100px）时，未移除已绑定的点击事件，大屏下点击仍会触发小屏交互

修复后的代码 #

const domain = document.getElementById("domainshow");
const host = document.getElementById("hostingshow");
const togone = document.getElementById("mobiletoggleone");
const togtwo = document.getElementById("mobiletogglesec");

// 抽离点击事件回调，方便绑定/移除操作
function handleDomainClick() {
  togone.style.display = 'block';
  togtwo.style.display = 'none';
}

function handleHostClick() {
  togtwo.style.display = 'block';
  togone.style.display = 'none';
}

// 统一处理不同屏幕尺寸下的事件绑定逻辑
function updateClickEvents() {
  if (window.innerWidth <= 1100) {
    // 小屏模式：先移除再绑定，避免重复绑定导致多次触发
    domain.removeEventListener('click', handleDomainClick);
    domain.addEventListener('click', handleDomainClick);
    
    host.removeEventListener('click', handleHostClick);
    host.addEventListener('click', handleHostClick);
  } else {
    // 大屏模式：移除所有点击事件，确保交互完全失效
    domain.removeEventListener('click', handleDomainClick);
    host.removeEventListener('click', handleHostClick);
    // 可选：大屏下重置面板显示状态
    togone.style.display = 'none';
    togtwo.style.display = 'none';
  }
}

// 页面初始加载时执行一次，确保状态正确
updateClickEvents();

// 监听窗口尺寸变化，实时更新事件绑定状态
window.addEventListener('resize', updateClickEvents);

// 初始状态处理（保留原逻辑，也可整合到updateClickEvents中）
if (togone.style.display === 'block' && togtwo.style.display === 'block') {
  togone.style.display = 'none';
  togtwo.style.display = 'none';
}

关键优化说明 #

• 独立抽离回调函数，解决重复绑定导致的多次触发问题
• 小屏绑定事件前先执行移除操作，避免重复绑定
• 大屏时主动移除点击事件，确保交互完全失效
• 初始加载时执行状态判断，避免页面加载时出现异常状态

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