如何为移动设备触摸事件添加处理器，实现按钮监听移动端触摸

没问题！要让你的训练按钮同时兼容桌面端鼠标操作和移动端触摸操作，我们可以把交互逻辑抽成独立函数，然后同时绑定click（兼容桌面+部分移动端）和touchend（移动端触摸结束事件，避免误触）事件，还可以在触摸事件里阻止默认行为防止页面滚动干扰。

修改后的代码如下：

// 创建训练按钮和信息文本
for(let i=0;i<NUM_CLASSES; i++){
  const div = document.createElement('div');
  document.body.appendChild(div);
  div.style.marginBottom = '10px';

  // 创建训练按钮
  const button = document.createElement('button')
  button.innerText = "Train "+i;
  div.appendChild(button);

  // 统一的交互处理函数
  function handleTrainButton(e) {
    // 这里写原来鼠标事件里的逻辑，比如触发训练逻辑
    console.log(`开始训练类别 ${i}`);
    // 其他业务代码...
  }

  // 监听桌面端点击事件
  button.addEventListener('click', handleTrainButton);

  // 监听移动端触摸结束事件
  button.addEventListener('touchend', (e) => {
    // 阻止默认行为，避免页面滚动或缩放
    e.preventDefault();
    handleTrainButton(e);
  });
}

小细节说明： #

• 选择touchend而非touchstart：这样能避免用户滑动页面时误触按钮，只有当用户完成完整的触摸动作时才触发逻辑。
• 抽离统一处理函数：不用重复编写相同的业务逻辑，代码更整洁也更易维护。
• 阻止触摸默认行为：如果页面存在滚动，触摸按钮时可能会触发页面滚动，e.preventDefault()可以有效避免这种干扰。

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