81

我正在尝试使我的一些库与触摸设备一起使用，但我很难弄清楚它们是如何被支持的以及它们是如何工作的。

基本上，有5 个触摸事件，但似乎移动浏览器之间仅就事件达成共识touchstart（duh）。我创建了一个小提琴作为测试用例。

我已经在装有 Android 4 的 Galaxy Note 上对此进行了测试，但您也可以使用桌面浏览器查看链接。

目标是试图弄清楚如何处理轻击、双击和长击。没有什么花哨。

基本上，这就是发生的事情：

Android 股票浏览器不会触发触摸事件。它只是尝试通过连续点击、触发和事件来模拟鼠标点击mousedown，mouseup但click双击只是放大和缩小页面。

当手指触摸屏幕时，Chrome for Android 会触发 touchstart 事件。如果它发布得足够快，它会触发 then mousedown、mouseup和touchendfinallyclick事件。

在长按的情况下，大约半秒后它会触发mousedown和mouseup，touchend当手指抬起时，click最后没有事件。

如果你移动你的手指，它会触发一个touchmove事件几次，然后它会触发一个touchcancel事件，之后什么都不会发生，甚至touchend在抬起手指时也不会发生任何事件。

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

Firefox for Android 会正确触发touchstart事件，并且在短按触发的情况下,mousedown和之后。mouseuptouchendclick

在长按的情况下，它会触发mousedown，mouseup最后是touchend事件。对于这些事情，Chrome 也是如此。

但是如果你移动你的手指，如果连续触发touchmove（正如人们所期望的那样）但是当手指离开带有事件监听器的元素时它不会触发事件，并且当手指离开浏览器视口时它不会触发事件.touchleavetouchcancel

对于双击，它的行为就像 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 上对其进行测试，但如果你们中的一些人可以的话，我们将非常感谢您的反馈。

4

4 回答 4

26

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

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

在注释和代码之间大约有 1400 行，有很棒的文档并且代码很容易理解。

你可以看到作者是如何选择解决很多常见的触摸事件的：

按住，点击，双击，拖动，dragstart，dragend，dragup，dragdown，dragleft，dragright，swipe，swipeup，swipedown，swipeleft，swiperight，transform，transformstart，transformend，旋转，pinch，pinchin，pinchout，touch（手势检测开始） , release（手势检测结束）

我认为阅读源代码后，您将更好地理解触摸事件的工作原理以及如何识别浏览器能够处理的事件。

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

于 2013-09-06T18:34:27.853 回答
9

有一个非常棒的资源https://patrickhlauke.github.io/touch/tests/results/详细介绍了数量惊人的浏览器中的事件顺序。它似乎也定期更新（2016 年 9 月，最后一次更新是 2016 年 8 月）。

要点是，基本上所有的触发器mouseover和相关事件；大多数还触发触摸事件，通常在之前完成（到达touchend）mouseover然后继续click（除非对页面内容的更改取消了这一点）。谢天谢地，那些尴尬的例外相对较少（第 3 方 android 浏览器和黑莓 playbook）。

该链接资源的详细程度令人印象深刻，以下是许多操作系统、设备和浏览器测试中的前三个示例：

在此处输入图像描述

总结一些关键点：

移动浏览器

  • 所有列出的浏览器都会mouseover在第一次点击时触发。只有某些 Windows Phone 浏览器会在第二次点击时触发它。
  • 全部触发click。它没有指定click如果mouseover更改页面则取消（我相信大多数人都会这样做）
  • 大多数浏览器在和mouseover之后触发。这包括 iOS7.1 Safari、库存 Android、Chrome、Opera 和 Firefox for Android，以及一些（并非所有 Windows 手机浏览器）touchstarttouchend
  • 几个 Windows Phone 浏览器（所有 Windows 8 / 8.1 和一个 10 版本）和几个第 3 方 Android 浏览器（Dolphin、Maxathon、UC）mouseover 在 touchstart和touchend.
  • 只有 Blackberry Playbook在和mouseover之间触发touchstarttouchend
  • 只有 Opera Mini 和 Puffin（第 3 方 Android 浏览器）缺少touchstart或touchend.

桌面浏览器

  • 桌面版 Chrome 和 Opera 的最新版本表现得与移动版类似，touchstart其次touchend是mouseover.
  • Firefox 和 Microsoft 浏览器（IE <=11 和许多版本的 Edge）不会触发任何touchstart和touchend事件。
  • Mac 上没有数据，但考虑到 Mac 触摸屏界面的稀缺性，touchstart可能没有 Ma 浏览器支持。touchend

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

于 2016-09-13T18:51:57.213 回答
3

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

Opera、Firefox 和 Chrome 似乎有标准行为

  1. 滑动时（touchstart-touchmove-touchend）：

    1. 没有鼠标事件（不包括鼠标悬停）触发。
    2. 只有当 touchstart 和 touchend 出现在同一个元素上时，鼠标悬停才会触发。(touchstart-touchmove-touchend-mouseover)
    3. 如果在 touchstart 上阻止了默认设置：默认的滑动行为不起作用。鼠标事件触发不会发生任何变化。

  2. 点按（touchstart-touchend）：

    1. 所有鼠标事件 mouseover-mousemove-mousedown-mouseup-click 在延迟后触发
    2. 如果在 touchstart 上阻止默认设置：仅触发鼠标悬停。

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

  1. Mouseover 在 touchstart 之前触发，这意味着 mouseover 总是触发。
  2. 所有鼠标事件都在 Tap 时触发，即使在 touchstart 上阻止了默认设置。
于 2013-12-18T15:19:38.440 回答
3

是的，您可以启动一个计时器touchstart并结束它，touchend然后从那里做出选择。

你也可以让......比如说滑动，我的触发touchmove你可以获得“手指”的坐标，看看我在touchend被触发之前走了多少。

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

于 2013-01-23T18:34:59.543 回答