Detail of Michelangelo’s Creation of Adam
Your customers love mobile devices and apps. And they love the way of interacting with them, using touch.
Touch is a very natural input method and multi-touch allows intuitive gestures such as pinch-to-zoom. As mobile or web developers, we also love apps and touch interaction. But, face it, we are also quite lazy. We want to run code written once to execute on several browsers and platforms resulting in one and the same behavior. Unfortunately, there are two competing methods that allow interacting with websites using touch input:
Touch Events (W3C recommendation) were introduced by Apple with the release of iOS 2.0 in 2008. Touch events translate touch screen input (and only touch screen input) to events similar to the traditional mouse events (touchstart=mousedown, touchend=mouseup).
Pointer Events (W3C recommendation) encapsulate a whole bunch of input methods in one single layer of abstraction. Mouse, touch and pen input are all translated to one common “pointer” event the application can react to.
So, which method should we decide for? A good starting point could be looking at the browser support of both methods.
Desktop browser support
| Browser | Touch Events | Pointer Events |
|---|---|---|
| Chrome | yes | no |
| Firefox | disabled by default | no |
| Internet Explorer 10/11 | no | prefixed/yes |
Mobile browser support
| Browser | Touch Events | Pointer Events |
|---|---|---|
| Chrome | yes | no |
| Android Browser | yes | no |
| Safari (iOS) | yes | no |
| Internet Explorer 10/11 | no | prefixed/yes |
| Internet Explorer 11 (Windows Phone 8.1 Update) |
yes | yes |
Okay… that’s quite disappointing. Neither touch nor pointer events provide a true cross-platform support. Whereas most browsers don’t support pointer events at all, Internet Explorer completely lacks support for touch events on the desktop (e.g. tablets and touch-enabled devices with Windows or Windows RT).
Waiting for your touch… in some manner
You might say, “Wait, that Internet Explorer?” That browser with the TV advertisement accompanied by Blake Lewis’s “I’ve been waiting for your touch”? Yep, that browser. Neither the desktop version nor the Modern UI app included support for touch events. (That’s also the reason why you can’t interact with the three.js examples using Internet Explorer on desktop and touch, because those demos bind to touch events only, which aren’t supported by IE.)
Internet Explorer exclusively supports touch interactions if the target website binds to pointer events. But since most mobile websites incorporate touch events exclusively, Microsoft later introduced touch event support for Internet Explorer 11 on Windows Phone 8.1 Update to increase the mobile browser’s compatibility with touch-enabled websites that only bind to touch events.
Reshuffling the pack
However, browser support will radically improve: Microsoft’s upcoming browser Edge (previously called “Project Spartan”) fully supports touch events since Build 10041 of the Windows 10 Technical Preview, even on the desktop. Pointer events are about to be implemented in Chromium and will be enabled by default in Firefox Nightly.
Why pointer events?
With the launch of Microsoft Edge, it now seems safe to use touch events cross-platform. But are they the way to go? I don’t think so: pointer events abstract a lot of input methods (mouse, touch, pen, Kinect, …). Implemented once, you get all the others for free. (Remember, we’re lazy?) Furthermore, pointer events even include crazy details such as the angle between device and pen. And finally, pointer events serve a much better performance compared to touch events, especially on mobile. That’s why pointer events are definitely worth a try.
Alright, so what should I use now?
Although touch devices are around for quite a long time now, supporting cross-platform touch is still a cutting edge topic. Touch events feature a good browser support, but are slow and rather restricted. Pointer events are not available in all of the major browsers yet, especially in Safari. As so often, there’s no one perfect way to go, at least for the moment. In the following, you will find two suggestions to master cross-platform touch support with the means we have today. Please note that both approaches are about remodeling data that is actually available from input types the browser supports.
Polyfills: There are polyfills for both touch and pointer events. There’s the Pointer Events Polyfill, subtitled a unified event system for the web platform from the jQuery foundation and Cameron Henlin’s Touch polyfill for Internet Explorer 10 and 11. If you have an existing website or application using one of the two event types, you could use a polyfill to make it work in browsers not supporting the specific event type. As an example, the aforementioned three.js examples can be made to work with Internet Explorer if you include the touch polyfill. If you start development today, working with pointer events and the pointer events polyfill is an option, especially if you need low-level access to the events (e.g. actual values).
hammer.js: Another option to support touch input is using a JavaScript library called hammer.js, that again encapsulates the traditional mouse events, touch and pointer events. It offers a broad browser support. If you start developing today, this would also be an option, especially if you need high-level access to the events (e.g. gesture recognizers).
Have fun! And touch it.
