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

标签 javascript android touch android-browser

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

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

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

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

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

最佳答案

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

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

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

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

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

关于javascript - 在 Android 浏览器中禁用触发 touchcancel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17266748/

相关文章:

android - 具有固定卡 ID 的基于主机的卡仿真

java - 触摸输入和 OpenJDK 11 与 JavaFX 11 的问题

windows-7 - 哪些设备可用于在台式机上测试 WM_GESTURE 和 WM_TOUCH 代码?

javascript - 谷歌图表 API :Set ColumnChart Bar color for individual bars

javascript - 我需要一个自定义确认框以 html 形式实现 Onsubmit()。我该如何实现它?

javascript - jQuery 插件 : How to call and keep plugin function within scope on click

javascript - 在 phonegap 中的 touchstart 和 touchend 事件旁边使用滚动

javascript - 如何更新 Django 表单中的隐藏字段

android - Robotium Activity 泄漏导致其他测试的错误 Activity

java - 无法在 Kotlin 中调用 FileProvider 的 getUriForFile