Last major update on 29 January 2014. I used this test page.
See also the full list of mobile JavaScript events.
Back to the mobile homepage.
On this page I present the results of my touch action research. I concentrated on the few basic actions that users will want to take: clicking on a link, scrolling, zooming, as well as sliding their fingers more-or-less aimlessly.
Here is compatibility data for individual events. Most of them fire more-or-less as you’d expect on a touchscreen, where mouse events do not make sense but must be emulated anyway because they’re used so widely on the Web.
The only real problem is the contextmenu event, which would be very useful as a proxy for a touchhold action. Unfortunately it’s badly supported.
iOS | Android | Chrome | Opera | Black |
Nokia | UC | Puffin | Nin |
Dol |
Tizen | One | IE 10 | Firefox | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
6 | 7 | 2 | 4 | 28 | 31 | Mini | Mob 12 | Mob 18 | 6 | 7 | 10 | Xpr |
Mee |
An |
Bel |
Mini | 8 | 9 | OS | And | |||||||||
Touch events
Touchstart, touchmove, touchend |
Yes | Yes | Yes | No | Yes | Yes | No | Yes | No | Yes | No | Yes | No | Yes | No | Yes | |||||||||||||
Basic support for Apple’s touch events. |
|||||||||||||||||||||||||||||
MS touch events
pointerdown, pointermove, pointerup |
No | No | No | No | No | No | No | No | Yes | No | |||||||||||||||||||
Basic support for Microsoft’s touch events. |
|||||||||||||||||||||||||||||
Legacy mouse I
mousedown, mousemove, mouseup |
Yes | Yes | Yes | Yes | Yes | incom |
Yes | Mini |
Yes | Yes | Yes | Yes | |||||||||||||||||
|
|||||||||||||||||||||||||||||
Legacy mouse IIa
mouseover, mouseout |
Yes | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes | Yes | Yes | ||||||||||||||||||
Mouseover fires in the touch cascade. Mouseout fires when the user touches another element. |
|||||||||||||||||||||||||||||
iOS | Android | Chrome | Opera | Black |
Nokia | UC | Puffin | Nin |
Dol |
Tizen | One | IE 10 | Firefox | ||||||||||||||||
6 | 7 | 2 | 4 | 28 | 31 | Mini | Mob 12 | Mob 18 | 6 | 7 | 10 | Xpr |
Mee |
An |
Bel |
Mini | 8 | 9 | OS | And | |||||||||
Legacy mouse IIb
mouseenter, mouseleave |
No | Yes | No | No | Yes | No | No | No | No | No | Yes | Yes | |||||||||||||||||
Relatively new events (except in IE). With an actual they’re wonderful, but on touchscreens they makes as little sense as mouseover and mouseout. |
|||||||||||||||||||||||||||||
click
|
Yes | Yes | Yes | Yes | Yes | Yes | Mini |
Yes | Yes | Yes | Yes | ||||||||||||||||||
|
|||||||||||||||||||||||||||||
scroll
|
One | Yes | Yes | No | One | Yes | One | ? | Yes | No | One | No | Yes | weird | Yes | Yes | Yes | ||||||||||||
Should the browser fire one scroll event when scrolling ends, or a lot of them while scrolling continues? I count the second as “right,” but mostly because most browsers do so, and not because I think lots of scroll events are inherently superior.
|
|||||||||||||||||||||||||||||
contextmenu
|
No | No | Yes | No | Yes | No | Yes | No | No | Yes | No | No | No | Yes | No | ||||||||||||||
Could be useful as a kind of touchhold event, but works in too few browsers. |
|||||||||||||||||||||||||||||
iOS | Android | Chrome | Opera | Black |
Nokia | UC | Puffin | Nin |
Dol |
Tizen | One | IE 10 | Firefox | ||||||||||||||||
6 | 7 | 2 | 4 | 28 | 31 | Mini | Mob 12 | Mob 18 | 6 | 7 | 10 | Xpr |
Mee |
An |
Bel |
Mini | 8 | 9 | OS | And |
Below are the expected and actual reaction of the browsers when the user performs one of the fundamental actions. The expected reactions are mostly taken from Safari, which was the first browser to implement them, and whose model makes sense. The models espoused by some other browsers make less sense.
Although the table may give an impression of chaos and disaster, in practice the situation is not so bad. The legacy mouse events always fire when the user taps an element, and that’s by far the most important thing that should happen. Although, for instance, Android 4’s insistence on always firing mouseover and mousemove events, and doing so before touchstart, is strictly speaking a slight problem, the practical implications are almost nil.
So don’t worry too much. The actions below do what you’d expect in most browsers.
iOS | Android | Chrome | Opera | Black |
Nokia | UC | Puffin | Nin |
Dol |
Tizen | One | IE 10 | Firefox | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
6 | 7 | 2 | 4 | 28 | 31 | Mini | Mob 12 | Mob 18 | 6 | 7 | 10 | Xpr |
Mee |
An |
Bel |
Mini | 8 | 9 | OS | And | |||||||||
click action
Expected cascade:touchstart touchend (mouseenter) mouseover mousemove mousedown mouseup click |
Yes | Yes | Al |
Yes | Yes | Al |
Yes | Incor |
Al |
No touch | Al |
No | Yes | Al |
No touch | Yes | Al |
Yes | Al |
Incor |
Yes | ||||||||
If the user touches an element once the expected event cascade should take place. I found the following deviations:
|
|||||||||||||||||||||||||||||
click action on other element
Expected cascade:(mouseleave) mouseout |
Yes | Yes | Yes | Not sure | Yes | Yes | Yes | No | Yes | Yes | Incor |
Yes | |||||||||||||||||
When the user touches another element, the expected event cascade should fire on the original element.
|
|||||||||||||||||||||||||||||
iOS | Android | Chrome | Opera | Black |
Nokia | UC | Puffin | Nin |
Dol |
Tizen | One | IE 10 | Firefox | ||||||||||||||||
6 | 7 | 2 | 4 | 28 | 31 | Mini | Mob 12 | Mob 18 | 6 | 7 | 10 | Xpr |
Mee |
An |
Bel |
Mini | 8 | 9 | OS | And | |||||||||
double-tap action
Expected:touchstart touchend (repeat) scroll (resize) |
Yes | Yes | Al |
Al |
No | Yes | Al |
Incom |
No | Yes | No | Al |
mouse | Yes | No | mouse | Al |
vague | Al |
Incor |
Al |
||||||||
When a user double-taps on an element the touch events should fire twice, but the mouse events should be suppressed. When the zooming in on the element occurs, the scroll event always fires and the resize event may fire.
|
|||||||||||||||||||||||||||||
Pinch-zoom action
|
Yes | Yes | Al |
Yes | No | Yes | Al |
Yes | - | Yes | No | Yes | Al |
Yes | - | Yes | Al |
Incor |
Yes | ||||||||||
When the user pinch-zooms the touch events (and gesture events) should fire, but the mouse events should be suppressed. The browser always fires the scroll event and sometimes the resize event.
|
|||||||||||||||||||||||||||||
Scroll action
|
Yes | Yes | Al |
Yes | No | Yes | Al |
Yes | No | Yes | No | Al |
No | Yes | Al |
Yes | Al |
Al |
Yes | ||||||||||
When the user scrolls the touch events and scroll event should fire, while the mouse events should be suppressed.
|
|||||||||||||||||||||||||||||
iOS | Android | Chrome | Opera | Black |
Nokia | UC | Puffin | Nin |
Dol |
Tizen | One | IE 10 | Firefox | ||||||||||||||||
6 | 7 | 2 | 4 | 28 | 31 | Mini | Mob 12 | Mob 18 | 6 | 7 | 10 | Xpr |
Mee |
An |
Bel |
Mini | 8 | 9 | OS | And |
Mobile browser test array 1.2.5; January 2014