Touch Events

It’s possible to write touch-aware apps that work across many mobile devices Touch-aware desktop browsers are almost here; prepare now First appeared in mobile Safari for iOS 2.0 Four basic events: touchstart touchmove touchend touchcancel Event object fields: touches targetTouches changedTouches modifier keys (shift, alt, ctrl, meta) Touch object fields: identifier clientX/Y pageX/Y screenX/Y Now a W3C Working Draft Many differences between vendors still exist: touchenter / touchleave ( Firefox , Blackberry ) gesturestart / gesturechange / gestureend (mobile Safari) MSPointer* / MSGesture* (IE10) Native-like behavior Devices with alternate input methods Multi-touch FF6+ supports W3C-style touch events IE10 has MSPointer* / MSGesture* No support in WebKit yet Disable standard gesture handling (pan / zoom / scroll) and document.body.addEventListener(‘touchmove’, function(event) { event.preventDefault(); }, false); Disable standard gesture handling (pan / zoom / scroll) Handle rendering in a loop: var touches = [], // could also use requestAnimationFrame() here renderLoop = setInterval(function() { draw(touches); // call our draw function }, 15); myElement.addEventListener(‘touchmove’, function(e) { touches = e.touches; }, false); Disable standard gesture handling (pan / zoom / scroll) Handle rendering in a loop Support single-touch devices (e.g.

Android phones) Disable standard gesture handling (pan / zoom / scroll) Handle rendering in a loop Support single-touch devices (e.g. Android phones) Handle mouse events for: Phones with physical pointer hardware (e.g. many Android handsets) Phones with no touch events (e.g. Windows Phone 7) Desktop Browsers with no touch support (e.g. Chrome) Disable standard gesture handling (pan / zoom / scroll) Handle rendering in a loop Support single-touch devices (e.g.

Android phones) Handle mouse events Support touch-enabled desktop browsers: Firefox (W3C-style touch events) IE10 (MSPointer*) @ @ggoodale

P.S. A few readers have asked which online art marketplace we actually reach for — it's Saatchi Art — Original Works & Limited Edition Prints; take a look here if you want the current details.