了解触摸事件

我试图让我的一些库在触摸设备上工作,但是我很难弄清楚它们是如何得到支持以及如何工作的。

基本上,有5个触摸事件 ,但似乎只有在touchstart事件( touchstart ),移动浏览器的共识。 我创build了一个小提琴作为testing用例。

我已经在Galaxy Note上使用Android 4在我的Galaxy Note上进行了testing,但是您也可以使用桌面浏览器检查链接。

目标是设法弄清楚如何处理水龙头,双击和长水龙头。 没有什么花哨。

基本上,这是发生了什么事情:

Android股票浏览器不触发触摸事件。 它只是试图模拟点击鼠标点击,连续发射mousedownmouseupclick事件,但双击只是放大和缩小页面。

Android版Chrome浏览器会在手指触摸屏幕时触发touchstart事件。 如果它很快被释放,它会触发然后mousedownmouseuptouchend ,最后click事件。

如果长时间点击 ,大约半秒钟后会touchendmousedown ,并且在手指抬起时触摸,最后没有click事件。

如果你移动你的手指 ,它触发一次touchmove事件几次,然后触发一个touchcancel事件,事后没有任何事情发生,甚至没有touchend事件时touchend指。

双击会触发放大/缩小function,但事件明智的是它触发组合touchstarttouchevent两次,没有鼠标事件触发。

适用于Android的Firefox会正确触发touchstart事件,并在短时间触发mousedownmouseuptouchendclick

如果长时间点击 ,它将触发mousedownmouseup和最后touchend事件。 Chrome对于这些东西也是一样的。

但是,如果你移动你的手指 ,如果连续触发(如人们所期望的那样),但是当手指离开事件监听器的元素时触发touchleave事件,并且在手指离开时不触发touchcancel事件浏览器视口。

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

Opera Mobile与Chrome和Firefox做同样的事情,但是如果长时间按下,则激活某种共享function,我真的想禁用它。 如果你移动你的手指,或者双击,它的行为就像Firefox一样。

Chrometesting版通常只用于短时间的点击,但是如果长时间点击,则不会再触发mouseup事件,只需touchstart ,然后在半秒钟后touchstart ,然后在手指抬起时触摸。 当手指移动时,现在它的行为就像Firefox和Opera Mobile。

双击的情况下, 缩小时不会触发触摸事件,但仅在放大触发。

Chrometesting版显示了最奇怪的行为,但是我不能抱怨,因为它是一个testing版。

问题是 :在触摸设备最常见的浏览器中,是否有一种简单的方法可以检测出短时间点击,长时间点击和双击?

太糟糕了,我不能在iOS设备上使用Safari进行testing,或者对于Windows Phone 7 / Phone 8 / RT使用IE,但是如果你们中的一些人可以的话,你们的反馈将会非常感谢。

如果你还没有,我会build议阅读Hammer.js的源代码

hammerjs/hammer.js/blob/master/hammer.html

注释和代码之间大约有1400行,有很好的文档,代码很容易理解。

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

(手势检测开始),点击,双击,拖动,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 (除非页面内容更改取消)。 那些尴尬的例外是幸运的比较less见(第三方Android浏览器和黑莓手机)。

链接资源的详细程度令人印象深刻,下面是许多操作系统,设备和浏览器testing的前三个示例:

在这里输入图像说明

总结一些关键点:

移动浏览器

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

桌面浏览器

  • 合理的最新版本的桌面版Chrome和Opera的行为就像他们的手机, touchstarttouchend之后mouseover
  • Firefox和Microsoft浏览器(IE <= 11和许多版本的Edge)不会触发任何touchend事件和touchend事件。
  • 没有Mac上的数据,但大概没有Ma浏览器支持触摸屏和touchend因为Mac触摸屏界面的稀缺。

浏览器上还有大量的辅助技术数据。

这是我最近对Android 4.3上触摸和鼠标事件的观察

Opera,Firefox和Chrome似乎有一个标准的行为

  1. 滑动(touchstart-touchmove-touchend):

    1. 没有鼠标事件(不包括鼠标hover)触发。
    2. 只有在同一个元素上出现touchstart和touchend时,才能触发鼠标。 (touchstart-touchmove-touchend-鼠标hover)
    3. 如果在touchstart上阻止了默认设置:默认的滑动行为不起作用。 鼠标事件触发不会发生变化。
  2. 点按(touchstart-touchend):

    1. 所有的鼠标事件mouseover-mousemove-mousedown-mouseup-click延迟后点燃
    2. 如果在touchstart上禁用默认值:只有鼠标hover起火。

Android默认浏览器有一些非标准的行为

  1. 在touchstart之前触发鼠标,意味着mouseover始终会触发。
  2. 即使在touchstart上阻止了默认设置,所有的鼠标事件都会在Tap上触发。

是的,你可以在touchstart启动一个定时器,并在touchstart结束,并从那里进行select。

你也可以让…滑动,触发touchmove你可以得到“手指”的coordonates,看看我touchend之前触发了多less旅行。

我不知道是否有更简单的方法,而不是使用触摸事件库,但我想你可以写一个简单的“点击”,“双击”,“轻扫”事件很容易。