This series of compatibility tests is sponsored by Vodafone.
Related files:
Last major update on 25 July 2010.
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.
I used the same test page on all phones. Unfortunately it does not work on BlackBerry; I’ve scrounged its results from earlier tests.
Events can be divided into three groups:
Basically only the iPhone and Android support the touch events, while all browsers support the legacy events. Support for the interface events is mixed, with iPhone, Android, Symbian, and Iris doing a decent job, and most of the other browsers (including Opera and Firefox) a lousy one.
| Events | Opera Mobile | iPhone | Android | Dolfin | Symbian | Palm | Iris | Firefox | MicroB | IE Mobile | Black |
Net |
||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| WebKit | Gecko | |||||||||||||||||||||||
|
Touch events
Fire when the user moves his finger, whatever the context touchstart, touchmove, touchend Possible extensions: touchenter/leave and touchhold |
No | Yes | Incom |
Almost | No | No | No | No | No | |||||||||||||||
|
Any browser that does not support the touch events by the end of 2010 is out of the race.
|
||||||||||||||||||||||||
|
Interface events
Fire when a touch action leads to a certain interface reaction. click, contextmenu, scroll, zoom |
click | Incom |
click | Almost | click | Incom |
Incom |
Minimal | click | |||||||||||||||
|
The zoom event doesn’t yet exist. Some browsers fire the resize event instead. Context menus that pop up ontouchhold do not exist on some Operas, Symbian, Palm, Dolfin, and Firefox. Thus the contextmenu event should not fire in those browsers.
|
||||||||||||||||||||||||
|
Legacy events
mouseover, mousemove, mousedown, mouseup, mouseout
|
Yes | Almost | Yes | Almost | Incom |
Yes | Almost | Yes | Yes | Minimal | Incom |
|||||||||||||
|
This is how it all works:
Of course, browsers may disagree on the finer points.
|
||||||||||||||||||||||||
| Events | Opera Mobile | WebKit | Gecko | IE Mobile | Black |
Net |
||||||||||||||||||
| iPhone | Android | Symbian | Palm | Samsung | Iris | Firefox | MicroB | |||||||||||||||||
Sorry about the mess; I made a mistake and have to re-test a lot of stuff. Currently working on it.
| Events | Opera Mobile | iPhone | Android | Dolfin | Symbian | Black |
Phantom | Firefox | MicroB | IE Mobile | Black |
Net |
Obigo | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| WebKit | Gecko | |||||||||||||||||||||||
|
Click
without return false
|
Legacy | Yes | Yes | Yes | Legacy | touchstart mouseover mousemove mousedown touchend mousemove mouseup click |
Yes | mousedown mouseup click mouseover mouseout mouseover mouseout |
Legacy |
mousedown mouseover mouseup click |
Click | Click | ||||||||||||
|
||||||||||||||||||||||||
|
Click
with return false
|
Legacy | Yes | Yes | touchstart mouseover mousedown touchend |
Legacy | Yes | mousedown mouseup click mouseover mouseout |
Legacy |
mousedown mouseover mouseup click |
Click | Click | |||||||||||||
|
||||||||||||||||||||||||
| Events | Opera Mobile | iPhone | Android | Dolfin | Symbian | Black |
Phantom | Firefox | MicroB | IE Mobile | Black |
Net |
Obigo | |||||||||||
| WebKit | Gecko | |||||||||||||||||||||||
|
Hold
without return false
|
none | touchstart touchmove touchend mouseover mousemove mousedown mouseup click |
touchstart (touchmove 2.1) touchmove touchend mouseover mousemove mousedown mouseup click |
touchstart mouseover contextmenu touchend |
mouseover mousemove mousedown mouseup click |
touchstart mouseover mousemove mousedown touchmove |
touchstart, touch??? RETEST | [nothing] mousedown mouseup click mouseover mouseout mouseover mouseout |
none | contextmenu |
mousedown mouseup click |
none | ||||||||||||
| OpMob: shows "select text" contextmenu (Symbian) HTC Legend/BB WebKit/MicroB/NetFront shows contextmenu but no event There is no context menu on Dolfin | ||||||||||||||||||||||||
|
Hold
with return false
|
none | touchstart touchcancel |
touchstart (touchmove 2.1) touchend |
touchstart mouseover mousedown contextmenu touchend | mouseover mousemove |
touchstart touchmove |
touchstart, touch??? RETEST | [nothing] mousedown mouseup click mouseover mouseout mouseover mouseout |
none | contextmenu |
mousedown mouseup click |
none | ||||||||||||
| iPhone: canceled by copy dialog OpMob: shows "select text" contextmenu (Symbian) BB WebKit, MicroB shows contextmenu but no event | ||||||||||||||||||||||||
| Events | Opera Mobile | iPhone | Android | Dolfin | Symbian | Black |
Phantom | Firefox | MicroB | IE Mobile | Black |
Net |
Obigo | |||||||||||
| WebKit | Gecko | |||||||||||||||||||||||
|
Slide
without return false
|
none | touchstart touchmove (many) touchend scroll |
touchstart touchmove many times first resize, then scroll, many times touchend |
touchstart touchmove & scroll many times touchend | mouseover mousemove scroll |
touchstart mouseover mousemove mousedown touchmove resize scroll (many) resize |
touchstart touchmove touchend scroll | none | none | mousedown mouseover mousemove (many) | none | none | ||||||||||||
|
Page scrolls Android behaviour is of Nexus One (2.2). Legend (2.1) leaves out everything except touchstart, touchmove, resize. |
||||||||||||||||||||||||
|
Slide
with return false
|
none | touchstart touchmove (many) touchend |
touchstart touchmove (many) touchend |
touchstart mouseover mousedown touchmove (many) touchend |
mouseover mousemove scroll |
touchstart touchmove (many) touchend |
touchstart touchmove touchend | none | none | mousedown mouseover mousemove (many) | none | none | ||||||||||||
| Events | Opera Mobile | iPhone | Android | Dolfin | Symbian | Black |
Phantom | Firefox | MicroB | IE Mobile | Black |
Net |
Obigo | |||||||||||
| WebKit | Gecko | |||||||||||||||||||||||
The tables below contain the actual test results I obtained. The table above was created by summarizing them.
The first table is about the events-wise result of a few basic touch actions.
Then comes some data on the firing of the interface events.
Finally a closer look at what actually happens when the user clicks something.
| Action | Op 10 Symb | Op 9.7 Win | Op 9.6 H1 | Op 9.x WM | iPhone 3.1 | Android 1.5 | Android 2.2 | Dolfin | Symbian | Iris | Palm Pre 1.1 | Samsung WM | Firefox | MicroB | IE Mob 6 | Black |
NetFront 4 | Black |
||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Click on link or div
|
Legacy | Almost | Yes | Legacy | Legacy | Legacy | Legacy | Legacy | BB | |||||||||||||||
|
General note: the sequence of events may differ slightly per browser. The mousemove event, especially, kind of wanders around the event sequence like a ghostly torment. touchstart, touchend, mouseover, mousemove, mousedown, mouseup, click Note: no touchmove. In theory the finger doesn’t move during a touchclick action. (In practice it may, but the OS is supposed to filter this out.) Only one mousemove event fires. The event order may differ slightly.
|
||||||||||||||||||||||||
|
Keep finger depressed for a long time
|
No | Short mouse | WM | Yes | Samsung | Short mouse | Click | WM | Click | No | IE | No | No | BB | ||||||||||
|
Ideally the browser would distinguish between the touchdown and the touchup. Only iPhone, Android, and the Widget Managers do, however. If a context menu pops up, the browser should fire a contextmenu event. Only IE and Iris do, however. When screen is released without context menu: touchend, mouseover, mousemove, mousedown, mouseup, click When screen is released with context menu: touchend, contextmenu When screen is released: untestable; when the context menu pops up contact with the test element is lost When screen is touched: mouseover, mousedown When screen is released: mouseup, click
|
||||||||||||||||||||||||
| Action | Op 10 Symb | Op 9.7 Win | Op 9.6 H1 | Op 9.x WM | iPhone 3.1 | Android 1.5 | Android 2.2 | Dolfin | Symbian | Iris | Palm Pre 1.1 | Samsung WM | Firefox | MicroB | IE Mob 6 | Black Berry | NetFront 4 | |||||||
|
Slide finger
Browser may scroll if appropriate
|
Some |
Short | No | WM | Once | Many | Many | Short | Scroll | No | WM | No | IE | No | No | |||||||||
|
The browser MUST fire events while the finger moves, and when the page scrolls. If the browser scrolls a scroll event should fire. This only happens in iPhone, Android, Opera Widget Manager, and Symbian WebKit. If the finger moves a mousemove or touchmove event should fire. This only happens in iPhone and Android (touchmove), and Opera Widget Manager and IE (mousemove). Note, however, that the event fires in IE only if the page can’t scroll. Scroll event fires after every touchmove. If scrolling is possible: focus. Only one scroll event at the end of the event sequence. When screen is touched: mouseover, mousedown When screen is released: mousemove, scroll (if applicable) No mouseup
|
||||||||||||||||||||||||
|
Pinch-zoom
Browsers should fire a zoom event.
|
n/a | Yes | n/a | Yes | n/a | n/a | n/a | |||||||||||||||||
|
Pinch-zoom capable browsers are converging on a simple touchstart, touchend, resize, scroll event sequence. The iPhone adds the gesture events. Dolfin leaves out the resize. |
||||||||||||||||||||||||
| Action | Op 10 Symb | Op 9.7 Win | Op 9.6 H1 | Op 9.x WM | iPhone 3.1 | Android 1.5 | Android 2.2 | Dolfin | Symbian | Iris | Palm Pre 1.1 | Samsung WM | Firefox | MicroB | IE Mob 6 | Black Berry | NetFront 4 | |||||||
When applicable, the contextmenu, scroll, and resize events should fire. The resize event should also fire when the page is zoomed. Also, browsers should fire events when the user first touches the screen.
| Event | Op 10 Symbian | Op 9.7 WinMob | Op 9.6 Samsung H1 | Op 9.x Symbian WM | iPhone 3.1 | Android 1.5 | Android 2.2 | Dolfin | Symbian | Iris | Palm Pre 1.1 | Samsung WM WebKit | Firefox | MicroB | IE Mob 6 | Black Berry | NetFront 4 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
click
User briefly touches (clicks on) an element. | Yes | Incom |
Yes | Incom |
Yes | Yes | Yes | Minimal | Yes | |||||||||||||||
|
||||||||||||||||||||||||
|
contextmenu
User touches and holds screen, and a contextmenu appears. | No | n/a | No | n/a | No | Over eager | n/a | Yes | n/a | No | Yes | n/a | No | |||||||||||
|
Should fire when a context menu appears. This usually happens after a touch-and-hold action. In general links have context menus, other areas don’t.
|
||||||||||||||||||||||||
|
zoom
User zooms by whatever means the browser offers. Browsers should fire a zoom event. | No | Resize | No | Resize | No | n/a | No | Resize | No | |||||||||||||||
|
An event should fire when the user zooms. Some browsers use the resize event, but that is not correct. They should fire the zoom event instead.
|
||||||||||||||||||||||||
|
scroll
User scrolls by dragging his finger. | Too few | Yes | Yes | Over eager | Yes | No | Yes | No | ||||||||||||||||
|
Should fire when the browser scrolls. It’s not unusual that this event also fires while zooming, since a double-tap or pinch zoom action can easily cause a bit of scrolling.
|
||||||||||||||||||||||||
|
touchstart
User initially touches the screen. | No | mouse |
Yes | No | mouse |
No | ||||||||||||||||||
|
The touchstart event is the standard, but a mousedown that fires when the user starts the touch action is OK, I suppose. |
||||||||||||||||||||||||
|
touchmove
User drags finger across screen. | No | Mouse |
Yes | No | Mouse |
No | ||||||||||||||||||
|
There should be a touchmove event that fires continuously while the user drags his finger across the screen. |
||||||||||||||||||||||||
| Event | Op 10 Symbian | Op 9.7 WinMob | Op 9.6 Samsung H1 | Op 9.x Symbian WM | iPhone 3.1 | Android 1.5 | Android 2.2 | Dolfin | Symbian | Iris | Palm Pre 1.1 | Samsung WM WebKit | Firefox | MicroB | IE Mob 6 | Black Berry | NetFront 4 | |||||||
The following events fire when the user clicks on an element (i.e. does a short touch action without moving his finger).
| Event | Op 10 Symbian | Op 9.7 WinMob | Op 9.6 Samsung H1 | Op 9.x Symbian WM | iPhone 3.1 | Android 1.5 | Android 2.2 | Dolfin | Symbian | Iris | Palm Pre 1.1 | Samsung WM WebKit | Firefox | MicroB | IE Mob 6 | Black Berry | NetFront 4 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
touchstart and touchend
|
No | Yes | No | |||||||||||||||||||||
|
touchmove
|
No | Yes | No | |||||||||||||||||||||
|
The touchmove action should not fire. The user does not move his finger, after all, when doing a click action. (In practice he does, but the OS should filter that out. iPhone and Dolfin do it correctly, Android not quite.) |
||||||||||||||||||||||||
|
mouseover
|
Yes | No | ||||||||||||||||||||||
|
mousemove
|
Yes | Multiple | Yes | No | Yes | No | ||||||||||||||||||
|
Only one mousemove event should fire. The Symbian Widget Manager may fire many, though. |
||||||||||||||||||||||||
|
mousedown, mouseup, and click
| Yes | Almost | Yes | Almost | Yes | Minimal | Yes | |||||||||||||||||
|
||||||||||||||||||||||||
|
focus
|
No | Yes | No | |||||||||||||||||||||
| Event | Op 10 Symbian | Op 9.7 WinMob | Op 9.6 Samsung H1 | Op 9.x Symbian WM | iPhone 3.1 | Android 1.5 | Android 2.2 | Dolfin | Symbian | Iris | Palm Pre 1.1 | Samsung WM WebKit | Firefox | MicroB | IE Mob 6 | Black Berry | NetFront 4 | |||||||