禁用在Android浏览器中触发touchcancel

Question

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

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

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

我读过关于何时调用touchcancel有很多inconsistency among browsers。 Android浏览器是我唯一有问题的浏览器。

那里有解决方法吗？例如，我可以完全禁用touchcancel事件吗？我的另一个想法是让touchcancel处理程序以编程方式触发另一个touchstart / touchmove事件，但我没有做到这一点。任何想法都将不胜感激。

Answer 1

如果您正在使用hammer.js，则可以通过添加以下命令来禁用指针事件（这会导致此类问题）： delete window.PointerEvent; 在index.html中加载hammer.js之前，它将忽略这些事件 您还可以设置SUPPORT_POINTER_EVENTS = false; （v2.0.8的第384行）做同样的事情。 理想情况下，开发人员会增加关闭它的能力，但开源难题也是如此......

Answer 2

我认为touchcansel是用户在特定行为中触摸按钮时触发的特殊事件。

实施例。用户触摸按钮，但没有将他的手指从显示器上移开，正好是那个按钮，而不是他可以将它向左移动一点，并在那里结束他的动作。在那种情况下，touchcancel会出现。

因此，如果您不希望触发该操作，我认为您必须删除在Android浏览器中与该操作相关联的所有处理程序。

$（'selector'）。off（'touchcancel'），如果它被删除$（'parent'）。undelegate（'touchcancel'，'selector'）

我不认为e.preventDefault（）存在问题。只有当您点击链接时，页面才会开始重新加载。点击按钮可能会重新加载页面？并且你在页面重新加载后等待一些操作，你实际上可能不理解它发生了。

Answer 3

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

基本上，如果您切换到指针事件，只需使用值pointercancel的{​​{1}} CSS属性即可阻止touch-action，只要浏览器具有正确实现的两个功能。 （Android 5 +，Chrome 55 +，IE11，Edge等）

如果您确实必须使用传统的触摸事件，则必须在touchmove事件中实施none，这样可以阻止event.preventDefault()触发，但是也将完全禁用浏览器处理任何默认操作，如平移或点击。

作为最后一点，我不会使用触摸事件+触摸操作CSS规则，因为touchcancel最近才添加，与指针事件相同。因此，虽然组合可能适用于较新的浏览器，但它肯定会在较旧的中失败（通过意外触发touch-action事件）。

从我发布的jQuery扩展中检查README，因为它解释了使用TouchEvent和PointerEvent接口的含义。