Touch events with HTML 5

26 Jun


Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user’s fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these events. For example, nearly any fast-paced game requires the player to press multiple buttons at once, which, in the context of a touchscreen, implies multi-touch.

Apple introduced their touch events API in iOS 2.0. Android has been catching up to this de-facto standard and closing the gap. Recently a W3C working group has come together to work on this touch events specification.

In this article I’ll dive into the touch events API provided by iOS and Android devices, explore what sorts of applications you can build, present some best practices, and cover useful techniques that make it easier to develop touch-enabled applications.

Touch events

Three basic touch events are outlined in the spec and implemented widely across mobile devices:

  • touchstart: a finger is placed on a DOM element.
  • touchmove: a finger is dragged along a DOM element.
  • touchend: a finger is removed from a DOM element.

Each touch event includes three lists of touches:

  • touches: a list of all fingers currently on the screen.
  • targetTouches: a list of fingers on the current DOM element.
  • changedTouches: a list of fingers involved in the current event. For example, in a touchend event, this will be the finger that was removed.

These lists consist of objects that contain touch information:

  • identifier: a number that uniquely identifies the current finger in the touch session.
  • target: the DOM element that was the target of the action.
  • client/page/screen coordinates: where on the screen the action happened.
  • radius coordinates and rotationAngle: describe the ellipse that approximates finger shape.

Touch-enabled apps

The touchstarttouchmove, and touchend events provide a rich enough feature set to support virtually any kind of touch-based interaction – including all of the usual multi-touch gestures like pinch-zoom, rotation, and so on.

This snippet lets you drag a DOM element around using single-finger touch:

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // If there's exactly one finger inside this element
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // Place element where the finger is = touch.pageX + 'px'; = touch.pageY + 'px';
}, false);

Below is a sample that displays all current touches on the screen. It’s useful just to get a feeling for the responsiveness of the device.

Read More

Leave a comment

Posted by on June 26, 2011 in HTML 5


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: