首页 文章

了解触摸事件

提问于
浏览
77

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

基本上,有5 touch events,但似乎只有 touchstart 事件(duh)的移动浏览器之间存在共识 . 我创建了一个fiddle作为测试用例 .

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

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

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

Android stock browser 不会触发触摸事件 . 它只是尝试用点击模拟鼠标点击,连续发射 mousedownmouseupclick 事件,但双击只是放大和缩小页面 .

Chrome for Android在手指触摸屏幕时触发touchstart事件 . 如果它很快就会被释放,它会触发 mousedownmouseuptouchend ,最后是 click 事件 .

如果长时间点击,大约半秒后它会在手指抬起时触发 mousedownmouseup ,以及 touchend ,最后没有 click 事件 .

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

双击会触发放大/缩小功能,但事件方面它会触发组合 touchstart - touchevent 两次,没有触发鼠标事件 .

Firefox for Android正确触发 touchstart 事件,如果短暂点击,则会激活 mousedownmouseuptouchendclick .

如果长按,它会触发 mousedownmouseup ,最后 touchend 事件 . 这些东西与Chrome相同 .

但是如果你移动你的手指,如果连续发射(正如人们所预料的那样),但当手指离开带有事件监听器的元素时它不会触发 touchleave 事件,并且当手指离开时不会触发 touchcancel 事件 . 浏览器视口 .

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

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

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

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

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

The question is :在触摸设备最常见的浏览器中,是否有一种简单的方法可以检测短按,长按和双按?

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

4 回答

  • 3

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

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

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

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

    按住,点击,双击,拖动,dragstart,dragend,dragup,dragdown,dragleft,dragright,swipe,swipeup,swipeown,swipeleft,swiperight,transform,transformstart,transformend,rotate,pinch,pinchin,pinchout,touch(手势检测开始),释放(手势检测结束)

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

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

  • 2

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

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

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

    enter image description here

    总结一些关键点:

    移动浏览器

    • 所有列出的浏览器在第一次点击时触发 mouseover . 只有一些Windows Phone浏览器会在第二次触发时触发它 .

    • 全部触发 click . 如果 mouseover 更改了页面,它没有指定取消 click (我相信大多数都这样做)

    • 大多数浏览器在 touchstarttouchend 之后触发 mouseover . 这包括iOS7.1 Safari,Android版,Chrome版,Opera版和Android版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和Microsoft浏览器(IE <= 11和许多版本的Edge)不会触发任何 touchstarttouchend 事件 .

    • Mac上没有数据,但考虑到Mac触摸屏界面的稀缺,可能没有Ma浏览器支持 touchstarttouchend .

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

  • 24

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

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

    • 在滑动(touchstart-touchmove-touchend)上:

    • 没有鼠标事件(不包括鼠标悬停)触发 .

    • 仅当touchstart和touchend出现在同一元素上时,才会触发鼠标悬停 . (touchstart-touchmove-touchend-鼠标悬停)

    • 如果在touchstart上阻止了默认值:默认的滑动行为不起作用 . 鼠标事件触发没有发生变化 .

    • On Tap(touchstart-touchend):

    • 所有鼠标事件mouseover-mousemove-mousedown-mouseup-在延迟后点击火

    • 如果在touchstart上阻止了默认值:仅触发鼠标悬停 .

    Android default browser has some non-standard behaviors

    • 鼠标悬停在touchstart之前触发,这意味着鼠标悬停始终触发 .

    • 即使在touchstart上阻止了默认设置,所有鼠标事件也会在Tap上触发 .

  • 8

    是的你可以在 touchstart 开始计时器并在 touchend 结束它并从那里做出选择 .

    你也可以......让我们说滑动,我的触发 touchmove 你可以得到"finger"的坐标,看看我在 touchend 被触发之前走了多少 .

    我不知道是否有更简单的方法,而不是使用触摸事件库,但我想你可以写一个简单的'点击','双击','刷卡'事件非常容易 .

相关问题