javascript - 需要触摸设备在覆盖另一个元素时保持 touchmove 事件触发吗？

Question

tl;博士

显示第二个 Canvas 元素意味着用户失去触摸 - 我不希望用户再次触摸屏幕

<小时/>

我正在构建一个 HTML5 Canvas 游戏(游戏显示一张图片，将其切成拼图 block ，然后以随机顺序显示这些拼图 block ，以便用户将这些拼图 block 重新组合在一起)。

源代码(针对我的开发分支)可以在此处查看:

https://github.com/Integralist/HTML5-Image-Slider-Game/tree/dragdrop

游戏的一个关键部分是，如果用户单击拼图 block ，则选定的拼图 block 就会移动到拼图中的任何可用空间中。如果用户按住点击时间超过几毫秒，我假设他们想要拖动所选的拼图 block ，而不是它自动为他们移动。

我这样做的方法是在原始 Canvas 上放置另一个 Canvas 。第二 block Canvas 仅用于“拖放”功能。我走这条路的原因是，否则，在拖动拼图 block 时，我需要存储当前的拼图状态，然后不断地重新绘制它 - 出于性能原因，我不想这样做。

到目前为止，我所得到的在基于鼠标的计算机上运行良好，因为在我设置要在第二个 Canvas 上拖动的部分之后，我有一个 mousemove 事件，该事件会触发并让用户在 Canvas 上拖动该部分。

我遇到的问题是在触摸设备上，因为没有 mousemove 事件，所以我使用 touchmove 事件，但是当我显示第二个 Canvas 并开始拖动过程​​时，我必须再次触摸屏幕才能触发touchmove 监听器。就用户而言，这很糟糕，因为他们在设备上单击并按住了手指，但显示的第二个 Canvas 导致手指触摸失去焦点，因此他们会有点失望，因为他们现在需要再次触摸屏幕开始拖动。

我尝试通过手动触发 touchmove 事件来解决此问题，但这不起作用。如果您下载代码(见上文)并在触摸设备上尝试，您就会明白我的意思。由于某种原因，拼图 block 突然跳到 Canvas 的左上角？并且仍然需要我再次触摸屏幕才能开始触发 touchmouse 事件。

我真的希望这只是一个小问题，有人能找到一个非常聪明的解决办法。

提前致谢!

Answer 1

这个策略怎么样？尝试始终将第二个透明 Canvas 放在底部 Canvas 的顶部。当用户向下触摸/单击时，他们是在顶部 Canvas 上执行此操作，而不是在底部 Canvas 上，您只需立即从底部 Canvas 上删除该部分并将其绘制到顶部 Canvas 上，然后让他们继续移动它？