我正在制作一个使用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
有很多inconsistency among browsers。 Android浏览器是我唯一有问题的浏览器。
那里有解决方法吗?例如,我可以完全禁用touchcancel
事件吗?我的另一个想法是让touchcancel
处理程序以编程方式触发另一个touchstart
/ touchmove
事件,但我没有做到这一点。任何想法都将不胜感激。
答案 0 :(得分:2)
如果您正在使用hammer.js,则可以通过添加以下命令来禁用指针事件(这会导致此类问题):
delete window.PointerEvent;
在index.html中加载hammer.js之前,它将忽略这些事件
您还可以设置SUPPORT_POINTER_EVENTS = false; (v2.0.8的第384行)做同样的事情。
理想情况下,开发人员会增加关闭它的能力,但开源难题也是如此......
答案 1 :(得分:0)
我认为touchcansel是用户在特定行为中触摸按钮时触发的特殊事件。
实施例。用户触摸按钮,但没有将他的手指从显示器上移开,正好是那个按钮,而不是他可以将它向左移动一点,并在那里结束他的动作。在那种情况下,touchcancel会出现。
因此,如果您不希望触发该操作,我认为您必须删除在Android浏览器中与该操作相关联的所有处理程序。
$('selector')。off('touchcancel'),如果它被删除$('parent')。undelegate('touchcancel','selector')
我不认为e.preventDefault()存在问题。只有当您点击链接时,页面才会开始重新加载。点击按钮可能会重新加载页面?并且你在页面重新加载后等待一些操作,你实际上可能不理解它发生了。
答案 2 :(得分:0)
我知道有点晚了,但如果其他人遇到此问题,here's a small jQuery extension会解释如何处理pointercancel
和touchcancel
事件。
基本上,如果您切换到指针事件,只需使用值pointercancel
的{{1}} CSS属性即可阻止touch-action
,只要浏览器具有正确实现的两个功能。 (Android 5 +,Chrome 55 +,IE11,Edge等)
如果您确实必须使用传统的触摸事件,则必须在touchmove事件中实施none
,这样可以阻止event.preventDefault()
触发,但是也将完全禁用浏览器处理任何默认操作,如平移或点击。
作为最后一点,我不会使用触摸事件+触摸操作CSS规则,因为touchcancel
最近才添加,与指针事件相同。因此,虽然组合可能适用于较新的浏览器,但它肯定会在较旧的中失败(通过意外触发touch-action
事件)。
从我发布的jQuery扩展中检查README,因为它解释了使用TouchEvent和PointerEvent接口的含义。