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

Posted 2023-03-05

【中文标题】移动设备触摸事件的触发次数不如我点击的次数多

【英文标题】：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 限制的重新渲染有关吗？

【参考方案1】：

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