tl;dr

显示第二个画布元素意味着用户的触摸丢失 - 我不希望用户必须再次触摸屏幕

<小时 />

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

源代码(对于我的开发分支(可以在这里看到：

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

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

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

到目前为止，我

所拥有的在基于鼠标的计算机上运行良好，因为在我设置要在第二个画布上拖动的作品后，我有一个鼠标移动事件，它只是触发并让用户在画布上拖动该作品。

我

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

我尝试通过手动触发触摸移动事件来解决此问题，但这不起作用。如果您下载代码(见上文(并在触摸设备上尝试此操作，您将明白我的意思。拼图块不知为何突然跳到了画布的左上角？并且仍然需要我再次触摸屏幕才能开始触发触摸鼠标事件。

我真的希望这只是一个小问题，有人有一个非常聪明的工作。

提前感谢！