javascript - 在 Android 浏览器中禁用触发 touchcancel

Question

我正在制作一个使用 JavaScript 触摸事件的移动网站。在 iOS Safari 和 Android 版 Chrome 中一切正常，但普通的 Android 浏览器(版本 4.1.2)给我带来了麻烦。

在触摸过程中，touchstart 和 touchmove 事件按预期调用。但是，touchmove 处理程序执行的操作之一似乎会触发过早的 touchcancel 事件。 (我不确定这是否重要，但触发 touchcancel 的操作是修改 SVG 对象的 viewBox 属性。)如果我注释掉此操作，触摸过程正常进行(即完成 touchmove 到 touchend)。

我所有的触摸处理程序都调用 preventDefault() 函数，因此问题不是此错误中描述的问题:https://code.google.com/p/android/issues/detail?id=19827 .

我读到有很多 inconsistency among browsers至于何时调用 touchcancel。普通的 Android 浏览器是唯一对我来说有问题的浏览器。

有解决办法吗？例如，是否可以完全禁用 touchcancel 事件？我的另一个想法是让 touchcancel 处理程序以编程方式触发另一个 touchstart/touchmove 事件，但我并没有取得太大进展。任何想法将不胜感激。

Answer 1

我知道有点晚了，但如果其他人遇到这个问题，here's a small jQuery extension这解释了如何处理 pointercancel 和 touchcancel 事件。

基本上，如果您切换到指针事件，您将能够通过简单地使用 touch-action CSS 属性和none 的值，只要浏览器正确实现了这两个功能。 (Android 5+、Chrome 55+、IE11、Edge 等)

如果您真的必须改用遗留的触摸事件，则必须在您的触摸移动事件中实现event.preventDefault()，这将阻止 touchcancel 从触发，但它也将完全禁用浏览器处理任何默认操作，如平移或单击。

最后一点，我不会使用触摸事件 + 触摸 Action CSS 规则，因为 touch-action 是最近才添加的，与 Pointer 一样事件。因此，虽然该组合可能适用于较新的浏览器，但它肯定在较旧的浏览器中会失败(通过意外触发 touchcancel 事件)。

检查我发布的 jQuery 扩展中的自述文件，因为它解释了使用 TouchEvent 和 PointerEvent 接口(interface)的含义。