Chrome Dev Tools 64中如何获取真实Touch事件？

我之前踩过一模一样的坑！默认的响应式模式看起来像是在模拟移动端，但其实只是调整了页面视口尺寸，并没有真正启用触摸事件的模拟机制——所以你捕获到的touchstart本质上还是鼠标事件的包装体。下面给你几个亲测有效的解决办法：

• 切换到具体移动设备模拟
  打开Chrome DevTools的设备工具栏（就是左上角那个手机形状的图标），别用默认的「Responsive」选项，直接从设备列表里选一个真实的移动设备（比如iPhone 13、Pixel 7）。选中后，工具栏顶部会出现「触控」开关，确保它是打开状态。这时候再触发触摸相关事件，日志里就能看到真正的TouchEvent对象了，事件类型也会明确标记为touchstart/touchmove，不再是鼠标事件。

• 手动开启触摸模拟实验功能
  如果选具体设备还是没效果，可以进DevTools设置（右上角三个点→设置，或者按F1），找到「实验性功能」板块，开启「Emulate touch events」选项。开启后刷新页面，再用响应式模式操作，浏览器就会生成真实的触摸事件了。

• 代码层面兼容判断（备用方案）
  如果你需要同时兼容鼠标和触摸场景，也可以在代码里加个判断，区分真实触摸事件和模拟事件：

  const targetElement = document.getElementById('your-element');
  targetElement.addEventListener('touchstart', (e) => {
    if (e instanceof TouchEvent) {
      console.log('真实触摸事件已捕获:', e);
      // 这里可以获取触摸点信息：e.touches[0].clientX 之类的
    } else {
      console.log('这是模拟的触摸/鼠标事件:', e);
      // 兼容鼠标逻辑
    }
  });
  

  不过还是优先搞定调试工具的设置，毕竟用真实触摸事件测试才更贴合移动端实际情况。

小提醒：默认响应式模式的设计初衷是快速适配不同视口，不是模拟移动设备的输入行为，所以才会把触摸事件映射成鼠标事件。只有启用专门的触摸模拟，浏览器才会走移动端的触摸事件栈。

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