Javascript 了解触摸事件

Understanding touch events

提问by MaxArt

I'm trying to make some of my libraries work with touch devices, but I'm having a hard time trying to figure out how they're supported and how they work.

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

Basically, there are 5 touch events, but it seems there's consensus among mobile browsers only on the touchstartevent (duh). I've created a fiddleas a test case.

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

I've tested this on my Galaxy Note with Android 4 on board, but you can check the link with a desktop browser too.

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

The goal is to try to figure out how to handle taps, double taps and long taps. Nothing fancy.

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

Basically, this is what happens:

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

The Android stock browserdoesn't fire touch events. It just tries to emulate mouse clicks with taps, firing mousedown, mouseupand clickevents consecutively, but double taps just zoom in and out tha page.

在Android的股票浏览器不火的触摸事件。它只是试图模仿鼠标点击，水龙头，射击mousedown，mouseup和click事件连续，但双水龙头只是在进出塔页面缩放。

Chromefor Android fires the touchstart event when the finger touches the screen. If it's released soon enough, it fires then mousedown, mouseup, touchendand finally clickevents.

当手指触摸屏幕时，Android 版Chrome会触发 touchstart 事件。如果它的发布很快，它触发那么mousedown，mouseup，touchend最后click事件。

In case of long tap, after about half a second it fires mousedownand mouseup, and touchendwhen the finger is lifted, with no clickevent at the end.

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

If you move your finger, it fires a touchmoveevent a couple of times, then it fires a touchcancelevent, and nothing happens afterwards, not even a touchendevent when lifting the finger.

如果你移动你的手指，它会触发一个touchmove事件几次，然后它会触发一个touchcancel事件，之后没有任何反应，甚至touchend在抬起手指时也没有事件。

A double taptriggers the zoom in/out features, but event-wise it fires the combo touchstart-toucheventtwice, with no mouse events fired.

一双击触发器/缩小变焦功能，但事件明智它触发组合touchstart-touchevent两次，没有鼠标事件被解雇。

Firefoxfor Android correctly fires the touchstartevent, and in case of short tap fires mousedown, mouseup, touchendand clickafterwards.

火狐为Android正确触发该touchstart事件，并在短击火灾的情况下mousedown，mouseup，touchend和click之后。

In case of long tap, it fires mousedown, mouseupand finally touchendevents. It's the same of Chrome for these things.

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

But if you move your finger, if fires touchmovecontinously (as one may expect) but it doesn notfire the touchleaveevent when the finger leaves the element with the event listener, and doesn't fire the touchcancelevent when the finger gets out of the browser viewport.

但是，如果你移动你的手指，如果火灾touchmove汽车无（作为一个可以预期），但它不不火的touchleave事件当手指离开与事件侦听器的元素，并且不火的touchcancel当手指得到浏览器窗口的出事件.

For double taps, it behaves just like Chrome.

对于双击，它的行为就像 Chrome。

Opera Mobiledoes the same thing of Chrome and Firefox for a short tap, but in case of long press activates some sort of sharing feature that I really want to disable. If you move your finger, or double tap, it behaves just like Firefox.

Opera Mobile对 Chrome 和 Firefox 执行相同的操作，只需轻按一下，但在长按的情况下会激活某种我真的想禁用的共享功能。如果您移动手指或双击，它的行为就像 Firefox。

Chrome betadoes the usual for short taps, but in case of long taps it doesn't fire the mouseupevent anymore, just touchstart, then mousedownafter half a second, then touchendwhen the finger is lifted. When the finger is moved, now it behaves like Firefox and Opera Mobile.

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

In case of double taps, it doesn't fire touch events when zooming out, but only when zooming in.

在双击的情况下，它在缩小时不会触发触摸事件，而只会在放大时触发。

Chrome beta shows the oddest behaviour, but I can't really complain since it's a beta.

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

The question is: is there a simple and way to try to detect short taps, long taps and double taps in the most common browsers of touch devices?

问题是：是否有一种简单的方法可以尝试在最常见的触摸设备浏览器中检测短按、长按和双击？

Too bad I can't test it on iOS devices with Safari, or IE for Windows Phone 7/Phone 8/RT, but if some of you can, your feedback would be very appreciated.

太糟糕了，我无法在带有 Safari 的 iOS 设备或 Windows Phone 7/Phone 8/RT 的 IE 上测试它，但如果你们中的一些人可以，我们将非常感谢您的反馈。

回答by vrtis

If you haven't already, I would suggest reading the source code for Hammer.js

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

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

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

Between comments and code it's about 1400 lines, there is great documentation and the code is easy to understand.

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

You can see how the author has chosen to solve a lot of the common touch events:

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

hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch (gesture detection starts), release (gesture detection ends)

按住、点击、双击、拖动、拖动开始、拖动结束、向上拖动、向下拖动、向左拖动、向右拖动、滑动、向上滑动、向下滑动、向左滑动、向右滑动、变换、变换开始、变换结束、旋转、捏合、捏合、捏合、触摸（手势检测开始） , 释放（手势检测结束）

I think after reading the source code you will have much better understanding of how touch events work and how to identify which events the browser is capable of handling.

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

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

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

回答by user56reinstatemonica8

There's a really excellent resource https://patrickhlauke.github.io/touch/tests/results/that details the order of events across a staggering number of browsers. It also appears to be updated regularly (in September 2016, it was last updated August 2016).

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

The gist is,essentially everything triggers mouseoverand related events; most also trigger touch events, which usuallycomplete (reach touchend) before mouseoverand then continue to click(unless a change to page content cancels this). Those awkward exceptions are thankfully relatively rare (3rd party android browsers and blackberry playbook).

要点是，基本上所有触发mouseover和相关事件；大多数还会触发触摸事件，这些事件通常touchend在之前完成（到达）mouseover然后继续click（除非对页面内容的更改取消了此操作）。幸运的是，这些尴尬的例外情况相对较少（第 3 方安卓浏览器和黑莓剧本）。

That linked resource goes into an impressive level of detail, here's a sample of the first three of many, many operating system, device and browser tests:

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

To summarise some of the key points:

总结一些关键点：

Mobile browsers

移动浏览器

• All listed browsers trigger mouseoveron the first tap. Only some Windows Phone browsers trigger it on a second tap.
• All trigger click. It doesn't specify which cancel clickif mouseoverchanges the page (I believe most do)
• Most browsers trigger mouseoverafter touchstartand touchend. This includes iOS7.1 Safari, stock Android, Chrome, Opera and Firefox for Android, and some (not all Windows phone browsers)
• Several Windows Phone browsers (all Windows 8 / 8.1 and one version for 10) and several 3rd-party Android browsers (Dolphin, Maxathon, UC) trigger mouseoveraftertouchstartand touchend.
• Only Blackberry Playbook triggers mouseoverbetween touchstartand touchend
• Only Opera Mini and Puffin (3rd party Android browser) lack touchstartor touchend.

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

Desktop browsers

桌面浏览器

• Reasonably up to date versions of desktop Chrome and Opera behave like their mobile counterparts, touchstartand touchendfollowed by mouseover.
• Firefox and Microsoft browsers (IE <=11 and many versions of Edge) don't trigger any touchstartand touchendevents.
• No data on Macs, but presumably no Ma browsers support touchstartand touchendgiven the scarcity of Mac touchscreen interfaces.

• 合理高达桌面版Chrome和Opera的最新版本的行为和移动的同行，touchstart并touchend随后mouseover。
• Firefox 和 Microsoft 浏览器（IE <=11 和许多版本的 Edge）不会触发任何touchstart和touchend事件。
• 在Mac上没有任何数据，但据推测没有马浏览器都支持touchstart，并touchend给出了苹果触摸屏界面的稀缺性。

There's also an incredible amount of data on browsers combined with assistive technologies.

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

回答by Semra

Here is my latest observation on touch and mouse events on Android 4.3

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

Opera, Firefox, and Chrome seem to have a standard behavior

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

1. On Swipe (touchstart-touchmove-touchend):

   1. No mouse event(exluding mouseover) fires.
   2. Mouseover fires only if touchstart and touchend occurs on the same element. (touchstart-touchmove-touchend-mouseover)
   3. If default is prevented on touchstart: the default swipe behavior does not work. no changes occur regarding mouse event firing.

2. On Tap(touchstart-touchend):

   1. All mouse events mouseover-mousemove-mousedown-mouseup-click fire after a delay
   2. If default is prevented on touchstart: only mouseover fires.

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 default browser has some non-standard behaviors:

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

1. Mouseover fires before touchstart which means mouseover always fires.
2. All mouse events fire on Tap, even if the default is prevented on touchstart.

1. 鼠标悬停在 touchstart 之前触发，这意味着鼠标悬停始终触发。
2. 所有鼠标事件都在 Tap 上触发，即使默认值在 touchstart 上被阻止。

回答by Alexandru Calin

Yes you can start a timer attouchstartand end it on touchendand make your choices from there.

是的，您可以开始计时touchstart并结束计时，然后touchend从那里做出选择。

Also you can make... let's say swipe, my triggering touchmoveyou can get the coordonates of the "finger" and see how much i traveled before touchendgets triggered.

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

I don't know if there's any simpler way rather than using a touch events library, but i suppose you could write one for simple 'tap', 'double tap', 'swipe' events pretty easily.

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