HTML5/Android触摸取消

Question

HTML5/Android触摸取消

6

我正在尝试为移动端设计一个基于HTML5的界面。我试图使用touchstart/touchmove/touchend/touchcancel等指令来控制操作。但是每当我试图执行动作时，总是很快就会出现'touchcancel'指令，从而无法再有touchmove指令。

我尝试了这个链接：http://miniapps.co.uk/code/touchcancel/ 它完美地解决了我的问题，我没有任何问题。

但我认为问题来自于浏览器的移动干扰了我的画布操作。你知道我该如何解决这个问题吗？

更多解释：这里是我的测试代码：http://frys.free.fr/mNaissance/test.html，是我试图让“拼图”游戏在移动设备上运行的代码。我在文本下方添加了一个“log”div。当我在灰色画布上执行“touchmove”操作时，非常快地出现了'touchcancel'指令，之后就不再有'touchmove'指令。是不是更清楚了？对于我稚嫩的英语表示抱歉！谢谢帮助。

- user972506

我不知道你在说什么，请更加精确明确。如果可能的话，请提供你尝试过的代码或更多的例子来解释问题。 - Entreco

我刚遇到了一个我认为是同样的问题：问题是“Android浏览器有时会出现无明显原因的touchcancel事件，为什么？”//相同的代码在iOS设备上运行良好。 - Corkscreewe

你的链接无法使用，但是这个SO问题可能会有一些线索：https://dev59.com/02Uo5IYBdhLWcg3wkAHB - Rich Apodaca

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Corkscreewe · Accepted Answer

7

我相信我找到了原因 - Android浏览器（以及Android 4.0+的Chrome）认为你正在尝试滚动，因此它触发了touchcancel事件。你应该做的是

event.preventDefault();

在触摸移动事件中，你正在捕获信息。

- Corkscreewe

2

我的情况是相关的，但使用这个并没有帮助。如果有人遇到与 OP 类似但模糊相关的问题，请参考这个 Stack Overflow 的问题：https://dev59.com/02Uo5IYBdhLWcg3wkAHB - Rich Apodaca

出于同样的原因，此解决方案现在也适用于Chrome桌面版。 - Will

1

这不仅仅与Android浏览器有关，这是设计上的原因，因为浏览器必须在所有情况下自动接管诸如平移和缩放等操作。因此，当浏览器接管touchmove事件时，它会触发touchcancel事件，以防止对同一事件执行2个不同的操作（这将产生可怕的结果）。 - andreszs