在 Android 浏览器中禁用触摸取消触发

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。

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

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

Answer 1

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

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

如果您确实必须使用旧的 touch 事件，则必须在 touchmove 事件中实现 event.preventDefault()，这将阻止 touchcancel 触发，但它也会完全禁用浏览器对任何默认操作（如平移或单击）的处理。

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

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

Answer 2

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

Answer 3

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

例如。用户触摸按钮，但他的手指并没有完全从该按钮的显示屏上移开，而是可以将其向左移动一点，然后在那里结束他的动作。在这种情况下，会出现 touchcancel。

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

$('selector').off('touchcancel')，如果它被删除 $('parent').undelegate('touchcancel','selector')

我认为 e.preventDefault() 没有问题。只有当您单击链接并且页面开始重新加载时才可能出现。单击按钮时可能会重新加载页面？并且您在页面重新加载后等待一些操作，您实际上可能不明白它发生了。