This series of compatibility tests is sponsored by Vodafone.
Related files:
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 | |||||||||||||||||
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 Berry | NetFront 4 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Click on link or div
|
Legacy | Almost | Yes | Legacy | Legacy | Legacy | Legacy | Legacy | ||||||||||||||||
|
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 | |||||||||||
|
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 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 | |||||||