在移动设备上没有触发第二次点击画布

Posted 2023-03-06

【中文标题】在移动设备上没有触发第二次点击画布

【英文标题】：Second click on canvas is not being fired on mobile devices

【发布时间】：2022-01-12 14:47:18

【问题描述】：

我有一个糖果迷之类的游戏，并用这四个听众交换物品

canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mousedown', onMouseDown); // also tried pointerup and pointerdown
canvas.addEventListener('mouseup', onMouseUp);
canvas.addEventListener('mouseout', onMouseOut);

它在桌面上完美运行，但有时第二次单击（鼠标按下）（在第二个瓷砖上根本没有被触发）。我的意思是没有调用监听器函数。 我有

cursor: pointer

在我的 CSS 中，我不知道该怎么做。

注意：如果您下次单击画布上的某个位置，则会触发事件，就像在旧位置单击一样。 因此，如果我要更改瓷砖 x: 0, y: 0 和 x: 0, y: 1 的位置：

我选择第一个图块 (x: 0, y: 0) 我尝试选择第二个图块 (x:0, y:1)。事件未触发 如果我点击任何随机图块，这两个图块会以某种方式交换位置

请帮忙！谢谢！

【问题讨论】：

尝试在移动设备上使用“touchstart”而不是“mousedown”？

【参考方案1】：

将触摸事件Docs 与您现有的代码结合使用

canvas.addEventListener('touchmove', onMouseMove);
canvas.addEventListener('touchstart', onMouseDown);
canvas.addEventListener('touchend', onMouseUp);

【讨论】：

我不想失礼，但请您看看我的新相关问题吗？ Mobile devices touch event is not being triggered as many times as I clicked。您的回答有助于获得更好的性能，但是有新问题，我无法弄清楚。一些触摸事件的触发次数不如我点击屏幕的次数多