如何在不阻止页面滚动的前提下，阻止touchstart触发后的mousedown事件？

要搞定这个问题，核心是区分「触摸点击」和「触摸滑动」——只在确认是触摸点击时跳过后续的mousedown事件，同时保留滚动功能，也不动touchstart监听器（毕竟双指触摸的场景不能丢）。

具体实现思路：

• 加个标志位记录当前是否是触摸触发的交互
• 触摸开始时标记为触摸触发状态
• 用户滑动时（触发touchmove）取消标记，确保滚动不受影响
• mousedown事件里先查标志，若是触摸触发的交互就直接跳过，避免重复执行逻辑
• 触摸结束后重置标志，保证后续鼠标操作正常

修改后的代码如下：

// 新增标志位，记录是否由触摸触发的交互
let isTouchInitiated = false;

canvas.addEventListener('touchstart', function (event) {
  touchPressed = true;
  isTouchInitiated = true; // 标记为触摸触发
  // 保留你原有的end屏幕阻止默认行为逻辑
  if (currentScreen.name === "end") {
    event.preventDefault();
  }
  userInput(
    event.targetTouches[event.targetTouches.length - 1].clientX, 
    event.targetTouches[event.targetTouches.length - 1].clientY
  );
});

// 新增touchmove监听，判断用户是否在滑动
canvas.addEventListener('touchmove', function () {
  // 滑动时取消触摸标记，确保滚动正常
  isTouchInitiated = false;
});

canvas.addEventListener('touchend', function () {
  touchPressed = false;
  // 加100ms延迟重置，避免浏览器事件顺序问题导致误判
  setTimeout(() => {
    isTouchInitiated = false;
  }, 100);
});

canvas.addEventListener('mousedown', function (event) {
  // 如果是触摸触发的交互，直接跳过
  if (isTouchInitiated) {
    isTouchInitiated = false; // 重置标记，不影响下一次操作
    return;
  }
  userInput(event.clientX, event.clientY);
});

关键细节说明：

• touchmove监听：用户滑动时会触发这个事件，此时取消触摸标记，既保证滚动正常，也不会误拦后续可能的mousedown
• touchend的延迟重置：部分浏览器事件顺序有延迟，加个短延迟能避免触摸结束后误拦截纯鼠标操作
• mousedown的标记检查：精准跳过触摸触发的重复逻辑，纯鼠标操作不受任何影响

这样既解决了触摸后触发mousedown的问题，又保留了滚动功能，也没动touchstart监听器，完全满足双指触摸的场景需求。

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