了解触摸事件
我试图让我的一些图书馆能够使用触摸设备,但我很难弄清楚它们是如何得到支持以及它们是如何工作的。
基本上,有5个触摸事件,但似乎移动浏览器只在touchstart
事件( touchstart
)上达成共识。 我创建了一个小提琴作为测试用例。
我已经在Galaxy Note上使用Android 4在我的Galaxy Note上进行了测试,但您也可以通过桌面浏览器检查链接。
目标是设法弄清楚如何处理水龙头,双击和长时间水龙头。 没有什么花哨。
基本上,这是发生的事情:
Android股票浏览器不触发触摸事件。 它只是试图模拟点击鼠标点击,连续发射mousedown
, mouseup
和click
事件,但双击只是放大和缩小页面。
Android版Chrome浏览器在手指触摸屏幕时触发touchstart事件。 如果它的发布时间足够快,它会触发然后mousedown
, mouseup
, touchend
,最后click
事件。
在长按的情况下,经过大约半秒它触发mousedown
和mouseup
,和touchend
当手指抬起,没有click
在结束事件。
如果你移动手指,它会触发touchmove
事件几次,然后触发touchcancel
事件,事后没有任何事情发生,甚至在举起手指时甚至不会touchend
事件。
双击会触发放大/缩小功能,但事件明智地会触发组合touchstart
- touchevent
两次,而不会触发鼠标事件。
适用于Android的Firefox正确触发touchstart
事件,并在短时间点击触发mousedown
, mouseup
, touchend
并且之后click
。
如果长时间点击,它将触发mousedown
, mouseup
并最终touchend
事件。 这些东西与Chrome相同。
但是如果你移动你的手指,如果火焰touchmove
(如人们所期望的那样)触摸移动,但是当手指离开具有事件监听器的元素时它不触发touchleave
事件,并且当手指离开时不触发touchcancel
事件浏览器视口。
对于双击,它的行为就像Chrome一样。
Opera Mobile在短时间内做了与Chrome和Firefox相同的功能,但如果长时间按下,则会激活某种我想禁用的共享功能。 如果你移动手指,或者双击,它的行为就像Firefox一样。
Chrome测试版不平常的短击,但从长远看,水龙头的情况下,它不火的mouseup
了事件,只是touchstart
,然后mousedown
半秒钟后,再touchend
当手指抬起。 当手指移动时,现在它的行为就像Firefox和Opera Mobile。
在双击的情况下,缩小时不会触发触摸事件,但仅在放大时触发。
Chrome测试版显示了最奇怪的行为,但我无法真正抱怨,因为它是一个测试版。
问题是 :在触摸设备的最常见浏览器中,是否有一种简单的方法来检测短时间点击,长时间点击和双击?
太糟糕了,我无法在iOS设备上使用Safari或Windows Phone 7 / Phone 8 / RT的IE浏览器进行测试,但如果有些人可以,您的反馈将非常感激。
如果你还没有,我会建议阅读Hammer.js的源代码
https://github.com/hammerjs/hammer.js/blob/master/hammer.js
注释和代码之间大约有1400行,有很好的文档,代码很容易理解。
您可以看到作者选择如何解决大量常见触摸事件:
(手势检测开始),点击,双击,拖动,dragstart,dragend,dragup,下拉,dragleft,dragright,轻扫,swipeup,swipedown,swipeleft,swiperight,transform,transformstart,transformend,rotate,pinch,pinchin,pinchout, ,释放(手势检测结束)
我认为在阅读源代码之后,您将更好地理解触摸事件的工作方式以及如何识别浏览器能够处理哪些事件。
http://eightmedia.github.io/hammer.js/
有一个非常出色的资源https://patrickhlauke.github.io/touch/tests/results/,它详细介绍了跨越数量惊人的浏览器的事件顺序。 它也似乎会定期更新(2016年9月,最后更新于2016年8月)。
要点是,基本上所有事情都会触发mouseover
和相关事件。 大多数也会触发touch事件,这些事件通常在mouseover
之前完成(触及到touchend
),然后继续click
(除非页面内容的更改取消了此操作)。 这些尴尬的例外情况相当罕见(第三方Android浏览器和黑莓手机)。
链接资源的详细程度令人印象深刻,下面是许多操作系统,设备和浏览器测试中前三个的示例:
总结一些关键点:
移动浏览器
mouseover
。 只有一些Windows Phone浏览器会在第二次点击时触发它。 click
。 它没有指定如果mouseover
改变页面,取消click
(我相信大多数人会这样做) touchstart
和touchend
之后触发mouseover
。 这包括iOS7.1 Safari,Android Android版,Chrome浏览器,Opera和Firefox以及一些(不是所有Windows手机浏览器) touchstart
和touchend
之后触发mouseover
。 touchstart
和touchend
之间的mouseover
touchstart
或touchend
。 桌面浏览器
touchstart
和touchend
之后是mouseover
。 touchstart
和touchend
事件。 touchstart
和touchend
因为Mac触摸屏界面稀少。 浏览器上还有大量的数据与辅助技术相结合。
这是我最近对Android 4.3上的触摸和鼠标事件的观察
Opera,Firefox和Chrome似乎有一个标准行为
滑动(touchstart-touchmove-touchend):
点按(touchstart-touchend):
Android默认浏览器有一些非标准行为 :
上一篇: Understanding touch events
下一篇: How can I monitor scroll position while scrolling in Safari on iOS?