了解触摸事件

Question

我正在尝试让我的一些图书馆使用触摸设备,但我很难弄清楚它们是如何被支持的以及它们是如何工作的.

基本上,有5个触摸事件,但似乎只有touchstart事件(duh)在移动浏览器中有共识.我创建了一个小提琴作为测试用例.

我已经在我的Galaxy Note上使用Android 4测试了这个,但您也可以通过桌面浏览器检查链接.

目标是试图弄清楚如何处理水龙头,双水龙头和长水龙头.没有什么花哨.

基本上,这是发生的事情:

在Android的浏览器的股票不会触发触摸事件.它只是试图模仿鼠标点击,水龙头,射击mousedown,mouseup和click事件连续,但双水龙头只是放大和缩小网页塔.

当手指触摸屏幕时,Chrome for Android会触发touchstart事件.如果它的发布很快,它触发那么mousedown,mouseup,touchend最后click事件.

在的情况下,长按后,在约半秒它激发mousedown和mouseup,和touchend当手指抬起时,没有click在结束事件.

如果你移动你的手指,它会发射touchmove几次事件,然后它会发射一个touchcancel事件,之后什么都不会发生,甚至touchend在举起手指时都不会发生.

一双击触发/缩小功能变焦,但事件明智它触发组合touchstart- touchevent两次,发射没有鼠标事件.

火狐为Android正确触发该touchstart事件,并在短击火灾的情况下mousedown,mouseup,touchend和click之后.

如果长时间点击,它会触发mousedown,mouseup最后touchend发生事件.这些东西与Chrome相同.

但是,如果你移动你的手指,如果火灾touchmove汽车无(作为一个可以预期),但它不不火touchleave,当手指离开与事件侦听器的元素事件,以及不火的touchcancel当手指失控浏览器窗口的事件.

对于双击,它的行为就像Chrome一样.

Opera Mobile可以轻松实现Chrome和Firefox的相同功能,但是如果长按会激活某种我真正想要禁用的共享功能.如果您移动手指或双击,它的行为就像Firefox一样.

Chrome beta通常用于短按,但是如果长按,它不再发射mouseup事件,只是touchstart,然后mousedown在半秒之后,然后touchend当手指抬起时.当手指移动时,现在它的行为类似于Firefox和Opera Mobile.

如果是双击,则在缩小时不会触发触摸事件,但仅在放大时触发.

Chrome测试版显示了最奇怪的行为,但我不能抱怨,因为它是测试版.

问题是:在触摸设备的最常见浏览器中,是否有一种简单的方法可以尝试检测短分接头,长分接头和双分接头？

太糟糕了我无法在使用Safari的iOS设备或Windows Phone 7/Phone 8/RT的IE上测试它,但如果你们中的一些人可以,那么你的反馈将非常受欢迎.

Answer 1

如果您还没有,我建议您阅读Hammer.js的源代码

https://github.com/hammerjs/hammer.js/blob/master/hammer.js

在评论和代码之间,大约有1400行,有很好的文档,代码很容易理解.

您可以看到作者如何选择解决许多常见的触摸事件:

按住,点击,doubletap,拖动,dragstart,dragend,向上拉,向下拉,dragleft,dragright,滑动,swipeup,swipeown,swipeleft,swiperight,变换,transformstart,transformend,旋转,捏,pinchin,pinchout,触摸(手势检测开始) ,释放(手势检测结束)

我想在阅读完源代码后,您将更好地了解触摸事件的工作原理以及如何识别浏览器能够处理的事件.

http://eightmedia.github.io/hammer.js/

Answer 2

有一个非常好的资源https://patrickhlauke.github.io/touch/tests/results/详细说明了数量惊人的浏览器中的事件顺序.它似乎也定期更新(2016年9月,最后更新于2016年8月).

要点基本上是一切触发器mouseover和相关事件; 大多数还触发触摸事件,通常touchend在之前完成(到达)mouseover然后继续click(除非对页面内容的更改取消此操作).值得庆幸的是,这些尴尬的例外情况相对较少(第三方Android浏览器和黑莓手册).

这个链接的资源进入了令人印象深刻的细节,这里是许多操作系统,设备和浏览器测试的前三个示例:

总结一些关键点:

移动浏览器

• 所有列出的浏览器mouseover在第一次点击时触发.只有一些Windows Phone浏览器会在第二次触发时触发它.
• 全部触发click.click如果mouseover更改页面,它没有指定哪个取消(我相信大多数都这样做)
• 大多数浏览器触发mouseover后touchstart和touchend.这包括iOS7.1 Safari,Android版,Chrome版,Opera版和Android版Firefox版以及部分(并非所有Windows手机浏览器版)
• 一些Windows手机浏览器(所有Windows 8/8.1和一个版本为10)和几个第三方的Android浏览器(海豚,Maxathon,UC)触发mouseover 后 touchstart和touchend.
• 只有Blackberry Playbook会mouseover在touchstart和之间触发touchend
• 只有Opera Mini和Puffin(第三方Android浏览器)缺乏touchstart或touchend.

桌面浏览器

• 合理高达桌面版Chrome和Opera的最新版本表现得像他们的移动同行,touchstart和touchend后面mouseover.
• Firefox和微软浏览器(IE <= 11和边缘的许多版本)不会触发任何touchstart与touchend事件.
• 在Mac上没有数据,但可能没有Ma浏览器支持touchstart并且touchend考虑到Mac触摸屏界面的稀缺性.

浏览器与辅助技术相结合,还有大量数据.

Answer 3

是的，您可以在 开始计时器touchstart并结束计时器touchend，然后从那里做出选择。

你也可以……比方说滑动，我的触发touchmove你可以得到“手指”的坐标，看看我在touchend触发之前走了多少距离。

我不知道是否有比使用触摸事件库更简单的方法，但我想您可以很容易地为简单的“点击”、“双击”、“滑动”事件编写一个方法。