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

Posted 2023-02-22

【中文标题】在 Android 浏览器中禁用触摸取消触发

【英文标题】：Disable the firing of touchcancel in Android Browser

【发布时间】：2013-06-20 10:40:23

【问题描述】：

我正在制作一个使用 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 事件，但我并没有走得太远。任何想法将不胜感激。

【问题讨论】：

啊！我认为这个问题现在已经迁移到 Chrome 浏览器了！它出现在第 28 版中。请参阅 code.google.com/p/chromium/issues/detail?id=260732。

另见这篇文章，似乎相关：***.com/questions/15944197/…

我现在在 Chrome 浏览器中遇到了这个问题，干扰了 Hammer.js 的使用。有谁知道如何解决这个问题？

在这里投诉code.google.com/p/chromium/issues/detail?id=372357

供将来参考，这里的答案完美无缺：***.com/questions/10367854/html5-android-touchcancel

【参考方案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 接口的含义。

【参考方案2】：

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

【讨论】：

太棒了！谢谢！几天以来，我一直在与 Chrome (Android) touchcancel 行为作斗争，这是第一个真正解决了我的hammer.js 问题的解决方案。

你在开玩笑吧！？我不敢相信这行得通。多么疯狂！我花了三天时间尝试解决为什么我的 UI 出现问题，而这个简单的 k̶l̶u̶d̶g̶e̶ 修复解决了它？哇……只是……哇……

【参考方案3】：

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

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

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

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

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

【讨论】：

Touchcancel 将不可避免地被浏览器触发，并且尝试取消或阻止其中的默认值将无法按预期工作。