Understanding Touch Events

Question

I'm trying to get some of my libraries to work with touch devices, but it's hard for me to find ways how they are supported and how they work.

Basically, there are 5 touch events , but there seems to be consensus among mobile browsers only in the touchstart (duh) event. I created fiddle as a test case.

I tested this on my galactic note with Android 4 on board, but you can also check the connection with the desktop browser.

The goal is to try to figure out how to handle cranes, double cranes and long bends. Nothing unusual.

Basically, this is what happens:

Active Android browser does not trigger touch events. It just tries to simulate mouse clicks with taps by firing mousedown , mouseup and click events in sequence, but double taps simply increase and decrease the page.

Chrome for Android fires a touchstart event when a finger touches the screen. If it is released fast enough, it fires mousedown , mouseup , touchend and finally click events.

In the case of a long touch after about half a second, it fires mousedown and mouseup , and touchend when raising a finger without a click event at the end.

If you move your finger, it fires the touchmove event several times, then it fires the touchcancel event, and nothing happens after that, even with the touchend event touchend you raise your finger.

Double-clicking calls the zoom in / out function, but on an event, it twice combines a combination of touchstart - touchevent , and mouse events are not triggered.

Firefox for Android correctly fires the touchstart event, and in the case of short-term mousedown , mouseup , touchend and click touchend afterwards.

In the case of a long press, it fires the mousedown , mouseup and finally touchend . This is the same for Chrome for these things.

But if you move your finger if the touchmove fire touchmove constantly (as expected), but it does not fire the touchmove event when the finger leaves the element using the event listener and does not touchcancel when the finger leaves the browser view window.

For double taps, it behaves exactly like Chrome.

Opera Mobile does the same in Chrome and Firefox for a short press, but in the case of a long press, it activates some kind of sharing function, which I really want to disable. If you move your finger or double-tap, it will behave just like Firefox.

Chrome beta works the usual way for short-lived taps, but in the case of long taps, it no longer triggers the mouseup event, just touchstart , and then mousedown after half a second, then touchend when the finger is raised. When the finger moves, it now behaves like Firefox and Opera Mobile.

In the case of double taps, it does not trigger touch events when zooming, but only when zooming.

The beta version of Chrome shows the strangest behavior, but I can’t complain, as this is a beta version.

Question : Is there an easy way to search for short taps, long taps and double taps in the most common touch device browsers?

Too bad that I cannot test it on iOS devices using Safari or IE for Windows Phone 7 / Phone 8 / RT, but if some of you can, your feedback will be greatly appreciated.

Answer 1

If you have not done so already, I would suggest reading the source code for Hammer.js

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

There are about 1,400 lines between comments and code, there is excellent documentation, and the code is easy to understand.

You can see how the author decided to solve many common touch events:

Hold, tap, drag, drag, dragstart, dragend, dragup, dragdown, draft, drama, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transform, transform, rotate, pinch, pinchin, pinchout, touch (start gesture recognition) , shutdown (gesture detection ends)

I think that after reading the source code you will have a much better understanding of how touch events work, and how to determine which events the browser can handle.

http://eightmedia.imtqy.com/hammer.js/

Answer 2

There really is a great resource https://patrickhlauke.imtqy.com/touch/tests/results/ , which details the order of events in a staggering number of browsers. It is also regularly updated (in September 2016 it was updated in August 2016).

The bottom line is , in fact, all mouseover triggers and related events; most of them also trigger touch events, which usually end (reach touchend ) before mouseover , and then continue until click (if changing the contents of the page does not cancel). These uncomfortable exceptions are, fortunately, relatively rare (third-party browsers android and Blackberry playbook).

This related resource goes into an impressive level of detail, here is an example of the first three of many, many tests of the operating system, device and browser:

To summarize some key points:

Mobile Browsers

• All of these browsers launch mouseover first time they are touched. Only some Windows Phone browsers launch it on the second press.
• All click triggers. It does not indicate which click to cancel if mouseover modifies the page (I guess the most)
• Most browsers run mouseover after touchstart and touchend . This includes iOS7.1 Safari, Android, Chrome, Opera and Firefox for Android, as well as some (not all Windows phone browsers).
• Several Windows Phone browsers (all versions of Windows 8 / 8.1 and one version for 10) and several third-party Android browsers (Dolphin, Maxathon, UC) start mouseover after touchstart and touchend .
• Only Blackberry Playbook launches mouseover between touchstart and touchend
• Only Opera Mini and Puffin (a third-party Android browser) do not have touchstart or touchend .

Desktop browsers

• The fairly modern versions of Chrome and Opera desktop computers behave like their mobile counterparts, touchstart and touchend , and then mouseover .
• Firefox and Microsoft browsers (IE <= 11 and many versions of Edge) do not fire any touchstart or touchend .
• There is no data on Mac computers, but presumably Ma browsers support touchstart and touchend , given the limited Mac touchscreen interfaces.

There is also an incredible amount of data in browsers combined with assistive technologies.

Answer 3

Here is my last comment on touch and mouse events on Android 4.3

Opera, Firefox and Chrome seem to have standard behavior

• In scroll mode (touchstart-touchmove-touchhend):

  • The mouse event does not fire (excluding the manipulator).
  • Mouseover only works if touchstart and touchhend occur on the same element. (Touchstart-TouchMove-touchend-Mouseover)
  • If the default value is not touchstart, the default behavior does not work. no changes are made regarding mouse shooting.

• On Tap (touchstart-touchhend):

  • All mouseover-mousemove-mousedown-mouseup-click fire mouse events after a delay
  • If no touch is specified by default: mouse operation only.

The default Android browser has some non-standard behaviors :

• The mouse fires before touching, which means that the cursor always fires.
• All mouse events light up when pressed, even if touch start is not supported by default.

Answer 4

Yes, you can start the timer on touchstart and end it on touchend and make your choice there.

Also you can do ... let them say swipe, my touchmove launch you can get the coordinates of the "finger" and see how much I traveled before touchend .

I don’t know if there is any simpler way than using the sensory events library, but I suppose you could easily write one for simple events like “tap”, “double tap”, “swipe”.