Posts Tagged ‘multitouch’

Double-tap interactions

While click events are seamlessly supported on touch devices, double-click events are not and there is no equivalent double-tap event available. However, double-tap interactions can be captured by listening for multiple, subsequent touchend events. The code below shows how to do this, with the basis for a double-tap being:

  • Two touchend events, on a certain element, both occurring within a certain time interval (300ms)
  • Two touchend events, on a certain element, both occurring within a certain distance from each other (24px)

I’ve come across a lot of code that addresses the first point (see double tap on mobile safari), but the second point is just as important because almost all touchscreens are multitouch and a two-handed posture with a phone or tablet is not uncommon. With a two-handed posture, and an element large enough to span the screen, it’s easy to hit two different areas of the element (on opposite ends of the screen) in rapid succession – a double-tap would be detected, even though two distant points on the element were touched, unless the distance between the points is taken into account.

Ideally, both the interval and distance should be user-defined settings at the device/operating-system level, similar to the way setting the double-click speed is, but lacking such support, hacking it in at the application-level is the only viable option.

// Handler for when a double-tap (on a touchscreen) or double-click (with a mouse) is detected
var dblTapHandler = function (x, y) {

// Do stuff...


function() {

// Listen for double-click events for desktop/mouse-based interactions
$('.ia-dbltap-area').on('dblclick', function (e) {
// Call handler
dblTapHandler(e.pageX, e.pageY);

// Listen for touchend events for touch-based interactions
$('.ia-dbltap-area').on('touchend', function(e) {

var dblTapRadius = 24; // radius (in pixels) of the area in which we expect the 2 taps for a double-tap
var dblTapSpeed = 300; // interval (in milliseconds) in which we expect the 2 taps for a double-tap

if(e.originalEvent.changedTouches.length <= 0) {
return false; // we have nothing to work with

var dblTapDetected = false; // flag specifying if we detected a double-tap
var areaElem = $(this); // element in which this touchend event has occured

// Position of the touch
var x = e.originalEvent.changedTouches[0].pageX;
var y = e.originalEvent.changedTouches[0].pageY;

var now = new Date().getTime();

// Check if we have stored data for a previous touch (indicating we should test for a double-tap)
if('last-touch-time')) {

lastTouchTime =

// Compute time since the previous touch
var timeSinceLastTouch = now - lastTouchTime;

// Get the position of the last touch on the element
var lastX ='last-touch-x');
var lastY ='last-touch-y');

// Compute the distance from the last touch on the element
var distFromLastTouch = Math.sqrt( Math.pow(x-lastX,2) + Math.pow(y-lastY,2) );

// Check if:
// 1. If the time since the last touch is within the specified double-tap interval (dblTapSpeed)
// 2. The distance from the last touch is within the specified double-tap radius (tapRadius)
if(timeSinceLastTouch <= dblTapSpeed && distFromLastTouch <= dblTapRadius) {

// Flag that we detected a double tap
dblTapDetected = true;

// Call handler
dblTapHandler(x, y);

// Remove last touch info from element'last-touch-time', '');
'last-touch-x', '');
'last-touch-y', '');


if(!dblTapDetected) { // A double-tap wasn't detected

// Store time and position of this touch on the element
// (Next touch may be a double-tap, we can use this info to determine if it is)'last-touch-time', now);
'last-touch-x', x);
'last-touch-y', y);



The demo below shows the code in actions along with a bit of SVG to render where the user double-clicked or double-touched div.ia-dbltap-area:


I came across the following video of a toddler using an iPad for the first time. It’s amazing to watch and see how quickly she is able to acclimate to the touchscreen interface and navigate to and launch the apps she wants. I certainly haven’t seen kids able to do this with the traditional mouse/keyboard combo much less a touchpad on a laptop or netbook.

This is exactly the reason I was optimistic for the JooJoo … and why I’m optimistic for the iPad and the HP Slate, and touchscreens in general … it’s the touch-based user input which is poised to radically reshape and simplify the personal computing experience.

The accompanying blog post at laughing squid provides a nice write-up and analysis of the UX experiment. The concluding remarks are interesting:

Most of all, though, it’s cool to consider that as one of the new Children of Cyberspace, her expectations about computing will be shaped by the fact that she’s growing up in a touchscreen world.

The video along with this remark instantly reminded me of the TED conference where Jeff Han presented his multitouch interface and expressed his disappointment, in regards to the $100 laptop, of introducing a new generation to computing with the standard mouse and pointer interface.

It’s also amazing to remember seeing this video is 2006, where multitouch seemed like some conceptual idea that would never find its way into any real consumer-level product – only about a year later the iPhone was introduced.