了解触摸事件

我试图让我的一些图书馆能够使用触摸设备,但我很难弄清楚它们是如何得到支持以及它们是如何工作的。

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

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

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

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

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

Android版Chrome浏览器在手指触摸屏幕时触发touchstart事件。 如果它的发布时间足够快,它会触发然后mousedownmouseuptouchend ,最后click事件。

在长按的情况下,经过大约半秒它触发mousedownmouseup ,和touchend当手指抬起,没有click在结束事件。

如果你移动手指,它会触发touchmove事件几次,然后触发touchcancel事件,事后没有任何事情发生,甚至在举起手指时甚至不会touchend事件。

双击会触发放大/缩小功能,但事件明智地会触发组合touchstart - touchevent两次,而不会触发鼠标事件。

适用于Android的Firefox正确触发touchstart事件,并在短时间点击触发mousedownmouseuptouchend并且之后click

如果长时间点击,它将触发mousedownmouseup并最终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 (我相信大多数人会这样做)
  • 大多数浏览器在touchstarttouchend之后触发mouseover 。 这包括iOS7.1 Safari,Android Android版,Chrome浏览器,Opera和Firefox以及一些(不是所有Windows手机浏览器)
  • 几个Windows Phone浏览器(所有Windows 8 / 8.1和10个版本)以及几个第三方Android浏览器(Dolphin,Maxathon,UC)在touchstarttouchend之后触发mouseover
  • 只有Blackberry Playbook触发touchstarttouchend之间的mouseover
  • 只有Opera Mini和Puffin(第三方Android浏览器)缺乏touchstarttouchend
  • 桌面浏览器

  • 合理的最新版本的桌面版Chrome和Opera的行为与他们的移动设备类似, touchstarttouchend之后是mouseover
  • Firefox和微软浏览器(IE <= 11和边缘的许多版本)不会触发任何touchstarttouchend事件。
  • Mac上没有数据,但大概没有Ma浏览器支持touchstarttouchend因为Mac触摸屏界面稀少。
  • 浏览器上还有大量的数据与辅助技术相结合。


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

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

  • 滑动(touchstart-touchmove-touchend):

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

  • 所有鼠标事件mouseover-mousemove-mousedown-mouseup-delay在延迟后点燃
  • 如果在touchstart上阻止了默认设置:只有鼠标悬停起火。
  • Android默认浏览器有一些非标准行为

  • 在touchstart之前触发鼠标,这意味着mouseover始终会触发。
  • 即使在touchstart上阻止了默认设置,所有鼠标事件也会在Tap上触发。
  • 链接地址: http://www.djcxy.com/p/95621.html

    上一篇: Understanding touch events

    下一篇: How can I monitor scroll position while scrolling in Safari on iOS?