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:
elem.addEventListener('touchstart', function(ev) {
myMethod(ev.changedTouches[0]);
});
elem.addEventListener('mousedown', myMethod);
function myMethod(ev) {
//do something with ev.screenX and ev.screenY
}
Same for touchend --> mouseup and touchmove --> mousemove.
This also means: it is not possible to have multi-touch gestures in IE9 Mobile
Why does IE9 Mobile behave so different?
There's one simple explanation: Microsoft tried to put the whole IE9 "experience" to mobile devices, so what you can expect from IE9 mobile is the same as from IE9 on desktops.
Well, that's not entirely true. There are some more differences:
What's in IE9 mobile that's missing from the desktop version
- viewport meta-tag, well almost. The scale properties are not supported (which is a bummer)
-ms-text-size-adjustis added as CSS property, works the same as-webkit-text-size-adjust- GPS support for geocoding
What you will miss in IE9 mobile
- Downloadable fonts. Font face is supported, but fonts aren't cached
- Cross window communication
- CMYK images (do we need that?)
- Streaming audio. And that leads us to this issue we had to face once
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.