Stefan Baumgartner

Of mice and touches

Unbelievable, but true: Imagine you bought a new Windows Phone 7 (e.g. Nokia Lumia or Samsung Omnia) with "Mango" on it and try to get your mobile web app running, you will be really surprised when finding out, that there's no touch event available.

"But that's what i do", you will say, "I touch my shiny phone all the time!". And you are right with that, nonetheless, IE9 mobile does not register touchstart, touchend or touchmove. Instead of those well known events, IE9 thinks of your finger as a mouse.

Usually, when developing for mobile web apps, you will have some code like this in your JS:

var clickevent = (ontouchstart in window) ? 'touchstart' : 'click';

And add event listeners using that variable.

elem.addEventListener(clickevent, function(e) {
...
});

IE9 is no touch browser

That's good for developing your web app on the desktop as well as testing/using it on your mobile device. Even for IE9 Mobile, since all mobile browsers can handle onclick. But once you need gestures, you're going to need mouse events for deskop and IE9 Mobile.

Onfortunately, the touch event objects, while not that much different from mouse events in terms of properties, differ in one significant point: There can be more than one touch event at a time.

A way of handling both mouse and touch events would be something like this, considering you allow just one touch at a time and don't need complex touch related stuff:

Actually, it's quite nice that the mobile version of this browser behaves almost the same as the desktop browser, which makes developing alot easier. On the other hand, I think a touch device, and thus a browser on a touch device, is much more different than your average desktop. So we also need a certain differency in behaviour! The features added by the touch event on mobile webkit browsers allow us much more flexibilty and possibilites for our web apps. Furthermore, it's just wrong to treat your finger as a mouse.