9

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

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

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

我读过浏览器之间在何时调用方面存在很多不一致。touchcancel库存的 Android 浏览器是唯一对我有问题的浏览器。

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

4

3 回答 3

4

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

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

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

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

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

于 2017-10-06T02:48:29.097 回答
2

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

于 2017-11-29T20:18:32.600 回答
0

I think touchcansel is special event that triggers when user touched button in specific behavior.

Ex. User touch button, but didn't removed his finger from display on exactly that button, instead of this he could move it a bit to the left, and end his action there. In that case touchcancel would appear.

So if you don't want that action to fire, i think you have to remove all handlers that connected with that action in android browser.

$('selector').off('touchcancel'), of if it's delefated $('parent').undelegate('touchcancel','selector')

I don't think that there is problem with e.preventDefault(). Only may be if you click on a link, and page starts to reload. May be page is reloaded when you click on button? and you wait for some actions after page reloaded, you actually may not understand, that it happend.

于 2014-02-01T10:47:56.210 回答