移动设备触摸事件的触发次数不如我点击的次数多答案

【问题标题】：Mobile devices touch event is not being triggered as many times as I clicked移动设备触摸事件的触发次数不如我点击的次数多
【发布时间】：2022-01-12 19:52:58
【问题描述】：

我使用 react 和 canvas 开发了一个类似糖果迷的游戏，但它在移动设备上无法正常运行。我有这些听众：

if (isMobile) {
  canvas.addEventListener('touchstart', onMouseDown);
  canvas.addEventListener('touchend', onMouseUp);
} else {
  canvas.addEventListener('mousemove', onMouseMove);
  canvas.addEventListener('mousedown', onMouseDown);
  canvas.addEventListener('mouseup', onMouseUp);
  canvas.addEventListener('mouseout', onMouseOut);
}

它可以在桌面上完美运行。但是在我第二次点击后，在移动设备上没有立即触发监听器。例如，如果我想交换图块，我必须单击任何图块并等待 1 秒钟才能单击另一个图块，从而触发交换功能。如果我在单击第一个磁贴后直接单击第二个磁贴：不会触发侦听器。即使使用简单的console.log 函数，它的工作方式也相同。如果我点击了 N 次，我会在控制台中看到更少的日志。

这是我的 FPS 控制函数：

const updateFps = (dt) => {
  if (fpstime > 10) {
    fps = Math.round(framecount / fpstime);

    fpstime = 0;
    framecount = 0;
  }

  fpstime += dt;
  framecount += 1;
};

这是我的动画功能：

const main = (tframe) => {
  requestAnimationFrame(main);

  update(tframe);
  render();
};

有什么方法可以提高移动设备的可用性吗？它可以以某种方式与 fps 限制的重新渲染有关吗？

【问题讨论】：

标签： javascript html css reactjs canvas

【解决方案1】：

所以，我发现只有在 ios 设备上，DOM 和脚本在第一次触摸触发侦听器后才会被阻止。因此，经过几个小时的随意e.preventDefault() 完成了这项工作。所以只需在你的监听器中使用它:)

【讨论】：