禁用在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调用时有很多不一致之处.股票Android浏览器是唯一对我有问题的浏览器.

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

Answer 1

我知道现在有点晚了，但如果其他人也面临这个问题，这里有一个小的 jQuery 扩展，它解释了如何处理pointercancel和touchcancel事件。

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

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

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

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

Answer 2

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

前任。用户触摸按钮，但没有将手指从该按钮上的显示中移开，相反，他可以将其向左移动一点，并在那里结束操作。在这种情况下，将会出现 touchcancel。

因此，如果您不想触发该操作，我认为您必须删除 Android 浏览器中与该操作连接的所有处理程序。

$('selector').off('touchcancel'), of 如果被委托 $('parent').undelegate('touchcancel','selector')

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