Understanding touch events
If you haven't already, I would suggest reading the source code for 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.
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/
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).
The gist is, essentially everything triggers mouseover
and related events; most also trigger touch events, which usually complete (reach touchend
) before mouseover
and 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).
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
mouseover
on the first tap. Only some Windows Phone browsers trigger it on a second tap. - All trigger
click
. It doesn't specify which cancelclick
ifmouseover
changes the page (I believe most do) - Most browsers trigger
mouseover
aftertouchstart
andtouchend
. 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
mouseover
aftertouchstart
andtouchend
. - Only Blackberry Playbook triggers
mouseover
betweentouchstart
andtouchend
- Only Opera Mini and Puffin (3rd party Android browser) lack
touchstart
ortouchend
.
Desktop browsers
- Reasonably up to date versions of desktop Chrome and Opera behave like their mobile counterparts,
touchstart
andtouchend
followed bymouseover
. - Firefox and Microsoft browsers (IE <=11 and many versions of Edge) don't trigger any
touchstart
andtouchend
events. - No data on Macs, but presumably no Ma browsers support
touchstart
andtouchend
given the scarcity of Mac touchscreen interfaces.
There's also an incredible amount of data on browsers combined with assistive technologies.
Yes you can start a timer attouchstart
and end it on touchend
and make your choices from there.
Also you can make... let's say swipe, my triggering touchmove
you can get the coordonates of the "finger" and see how much i traveled before touchend
gets triggered.
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.
Here is my latest observation on touch and mouse events on Android 4.3
Opera, Firefox, and Chrome seem to have a standard behavior
-
On Swipe (touchstart-touchmove-touchend):
- No mouse event(exluding mouseover) fires.
- Mouseover fires only if touchstart and touchend occurs on the same element. (touchstart-touchmove-touchend-mouseover)
- If default is prevented on touchstart: the default swipe behavior does not work. no changes occur regarding mouse event firing.
-
On Tap(touchstart-touchend):
- All mouse events mouseover-mousemove-mousedown-mouseup-click fire after a delay
- If default is prevented on touchstart: only mouseover fires.
Android default browser has some non-standard behaviors:
- Mouseover fires before touchstart which means mouseover always fires.
- All mouse events fire on Tap, even if the default is prevented on touchstart.