Touch table

Vodafone

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:

  1. Touch events that describe the exact actions of the user on the screen without reference to the result of these actions. Examples: touchstart, touchmove, touchend.
  2. Interface events that describe the result of the touch action. Examples: click, resize, scroll, contextmenu.
  3. Legacy events that fire because many sites depend exclusively on them. Examples: mouseover, mousedown, mousemove, mouseup.

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.

Summary

Events Opera Mobile iPhone Android Dolfin Symbian Palm Iris Firefox MicroB IE Mobile BlackBerry old NetFront
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 Incomplete 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.

  • Even multitouch Android supports only one touch at a time.
  • Dolfin supports multitouch (i.e. you can read out several touches at once) but only up to a point. My multitouch drag-and-drop doesn’t work in this browser.
Interface events

Fire when a touch action leads to a certain interface reaction.

click, contextmenu, scroll, zoom

click Incomplete click Almost click Incomplete Incomplete 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.

click
Browser only fires the click event reliably
  • The contextmenu event does not fire in Opera, iPhone, Android, MicroB, and NetFront when a context menu appears.
  • Opera, Symbian, Palm, Firefox, MicroB, and NetFront do not fire any event when the user zooms.
  • Palm, Samsung, Firefox, IE, and NetFront do not fire scroll events. Opera does, but is unreliable.
  • iPhone and Symbian don’t fire the click event when a mouseover or mousemove event causes a DOM change. I don’t rule out that this may actually be a wise decsion for “fixed web” sites, but the click event is more important than the legacy events and my gut feeling is they shouldn’t do this regardless
  • BlackBerry only fires a click on links.
  • Dolfin always fires contextmenu and scroll events, even when they’re not necessary.
Legacy events
mouseover, mousemove, mousedown, mouseup, mouseout
Yes Almost Yes Almost Incomplete Yes Almost Yes Yes Minimal Incomplete

This is how it all works:

  1. If a touchstart and a touchend event occur on (roughly) the same coordinates this constitutes a mobile click action. The legacy events are fired, as is the click event.
  2. The legacy events to be fired are mouseover, mousemove, mousedown, and mouseup. In addition the :hover styles, if any, are applied to the element.
  3. Only one mousemove event fires.
  4. When a mobile click action occurs on another element, the mouseout event is fired on the original element and the :hover styles are removed.
  5. The dblclick event is not supported. (It’s totally useless, anyway.)

Of course, browsers may disagree on the finer points.

  • iPhone and Symbian: see interface events.
  • BlackBerry and NetFront do not support the mouseover and mousemove events.
  • Palm, Samsung and Firefox do not support the mousemove event.
  • Both Vodafone Widget Managers (the Opera-based Symbian one and the WebKit-based Samsung one) fire a mousedown event when the user first touches the screen and a continuous series of mousemove event when he moves his finger. In theory this makes a drag-and-drop script possible. Performance is lousy, though, and you should not attempt to use this feature.
  • BlackBerry only fires these events on links.
Events Opera Mobile WebKit Gecko IE Mobile BlackBerry old NetFront
iPhone Android Symbian Palm Samsung Iris Firefox MicroB

New research

Sorry about the mess; I made a mistake and have to re-test a lot of stuff. Currently working on it.

Opera Mobile
10.00 on Symbian (Nokia N97)
iPhone
Safari on iPhone 3.1
Android
2.1 on HTC Legend and 2.2 on Nexus One
Dolfin
on Samsung Wave
BlackBerry
on BlackBerry Torch (9800)
Firefox
1.1 on Maemo (Nokia N900)
MicroB
on Maemo (Nokia N900)
Events Opera Mobile iPhone Android Dolfin Symbian BlackBerry Phantom Firefox MicroB IE Mobile BlackBerry old NetFront 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
Yes
touchstart, touchend, mouseover, mousemove, mousedown, mouseup, click
Legacy
mouseover, mousemove, mousedown, mouseup, click
Click
mousedown, mouseup, click
  • The iPhone does not fire the mousedown, mouseup and click events if a DOM change takes place after the mousemove or mouseover events.
  • In Symbian WebKit the mousedown, mouseup and click events do not fire if the mouseover or mousemove event handlers change anything in the DOM OR a timeout is present (even if it doesn’t do anything).
  • BB old: only on links
  • Android 2.1 also fires touchmove
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
Yes
touchstart, touchend
Legacy
mouseover, mousemove, mousedown, mouseup, click
Click
mousedown, mouseup, click
  • Android 2.1 also fires touchmove
Events Opera Mobile iPhone Android Dolfin Symbian BlackBerry Phantom Firefox MicroB IE Mobile BlackBerry old NetFront 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 BlackBerry Phantom Firefox MicroB IE Mobile BlackBerry old NetFront 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 BlackBerry Phantom Firefox MicroB IE Mobile BlackBerry old NetFront Obigo
WebKit Gecko

Full tables

Nokia N97 (Symbian 2)
Opera 10 Symbian, Symbian 2, Op 9.x Symbian Widget Manager
HTC Touch Pro (WinMob 6.5)
Op 9.7, Iris, IE Mob 6, NetFront 4
Samsung H1
Op 9.6 H1, Samsung Widget Manager WebKit
iPhone
iPhone
HTC Pioneer
Android 1.5
Nokia N900
Firefox, MicroB
BlackBerry 9500
BlackBerry
Palm Pre
Palm Pre

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 BlackBerry old NetFront 4 BlackBerry WebKit
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.

Yes
The most advanced system, the one that all browsers will eventually have to support.
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.)
Legacy
mouseover, mousemove, mousedown, mouseup, click
Only one mousemove event fires. The event order may differ slightly.
BB
touchstart, mouseover, mousedown, touchend, mouseup, click
  • The iPhone does not fire the mousedown, mouseup and click events if a DOM change takes place after the mousemove or mouseover events.
  • Opera Symbian WM fires multiple mousemove events.
  • BlackBerry old and NetFront do not fire the mouseover and mousemove events.
  • Palm Pre, Firefox and Samsung WM WebKit do not fire the mousemove event.
  • IE also fires the focus event.
  • BlackBerry only fires events when you click on a link
  • In Symbian WebKit the mousedown, mouseup and click events do not fire if the mouseover or mousemove event handlers change anything in the DOM, even with a timeout.
`
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.

Yes
When screen is touched: touchstart
When screen is released without context menu: touchend, mouseover, mousemove, mousedown, mouseup, click
When screen is released with context menu: touchend, contextmenu
BB
When screen is touched: touchstart, mouseover, mousedown
When screen is released: untestable; when the context menu pops up contact with the test element is lost
Click
When screen is released: mouseover, mousemove, mousedown, mouseup, click
IE
contextmenu and focus events
Samsung
touchstart, mouseover, contextmenu, touchend
Short mouse
Mousemove, mouseover, contextmenu (if applicable)
WM
Widget Manager. The Vodafone Widget Managers diverge from the norm for some arcane reason.
When screen is touched: mouseover, mousedown
When screen is released: mouseup, click
  • iPhone doesn’t fire the touchmove event.
  • Android 2, Opera don’t fire the contextmenu event, even though they should.
  • Iris fires the mousedown event instead of the mousemove event.
  • Opera WM also fires the mousemove event.
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
Sometimes 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.

Many
touchstart, touchmove + scroll many times, touchend.
Scroll event fires after every touchmove.
IE
If scrolling is impossible: mousedown, mouseover, focus, mousemove many times
If scrolling is possible: focus.
Once
touchstart, touchmove, touchend, scroll.
Only one scroll event at the end of the event sequence.
Scroll
Only the scroll event.
Short
mouseover, mousemove, scroll
Sometimes
Scroll event fired sometimes.
WM
Widget Manager. The Vodafone Widget Managers diverge from the norm for some arcane reason.
When screen is touched: mouseover, mousedown
When screen is released: mousemove, scroll (if applicable)
No mouseup
  • Opera WM doesn’t fire mouseup.
  • Dolfin fires a scroll event even when the page does not scroll.
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

Special events

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 Incomplete Yes Incomplete Yes Yes Yes Minimal Yes
Incomplete
Browser does not fire the click event when a mouseover or mousemove event handler makes a DOM change.
  • BlackBerry only fires click events on links.
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.

  • Dolfin always fires the contextmenu when you touchhold the screen, even though it doesn’t actually have a context menu.
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.

  • The resize event sometimes fires in Iris, but not when you’d expect it.
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.

  • Operas fire far too few scroll events (mostly during resize) and are unreliable.
  • Dolfin always fires a scroll event when the user drags his finger, whether any scrolling occurs or not.
touchstart

User initially touches the screen.

No mousedown Yes No mousedown 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 Mousemove Yes No Mousemove No

There should be a touchmove event that fires continuously while the user drags his finger across the screen.

IE
The mousemove event fires continuously, but only if the page cannot scroll.
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 action

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
Almost
Event does not fire if a DOM change takes place as a reaction to a mouseover or mousemove event.
  • BlackBerry only fires these events on links.
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