Implementing doubletap on iPhones and iPads

When the iPhone first arrived, one of the coolest things that Apple did was to have Mobile Safari display a miniature view of an entire web site, allowing users to double tap and zoom into the portions of the site that they wanted to see. This clever solution to navigate large pages in a small screen came with a price.

If your site takes advantage of the double click functionality, when it is displayed on Mobile Safari you loose that capability, your clicks become touch events and the double click (double-tap) now belongs to the browser.

If you want to get the double click functionality back, the first thing you should know is that you can prevent the default browser behavior that takes your double click away. Once you have done that, you can easily re-implement the double click/touch behavior you lost. In your HTML page start with adding a meta tag to indicate the users are not allow to scale the page:

Now you should be able to write code for iOS devices and for regular browsers

Adding double double tap is bit trickier. We need to measure the time between two consecutive touch events. If a user taps twice within 500 milliseconds (half a second), I can assume that the user meant double tap. Now keep in mind that two click/touch events are also fired. The trick is that we have to wait before we can fire a click/touch event and call our doubletap handler only if users click/tap very quickly.

Let’s go one step at the time. I will use jQuery to bind a touchend event to an element selector:

What I have done so far, is to determine the difference between the last touch and the current touch events. The first time that this code runs, both the current touch time and the last touch time are the same, so the delta is zero. At the end of the function I want to make sure that I update the value of the last touch to be equal to the current touch.

Now that we know where to write the double tap code, let’s figure out how to add some logic to help us know when to invoke the double tap code:

To determine how long we have to wait before we can tell that the user only tapped once, I added a timeout call declared outside of the touchend event handler. Every time that the touchend event is fired, I clear the action timeout which prevents the click/touch from happening. If the value of delta is less than 500 milliseconds (half a second) we can definitely invoke the doubletap code, but if delta is higher that 500 milliseconds the timeout is defined again and our click/touch code will be invoked in half a second.

 

I want to learn more tricks like this one

  • (required)
  • Should be Empty:
In a nutshell: we DO NOT share your information with anyone. Learn more about our Privacy Policy.

 

Let’s put everything together and write it as a jQuery extension:

Usage:

 

This plugin will work on Desktop Browser as well as Mobile Safari. Click HERE to download the source code and basic examples.

What do you think of this post?

Tags: , , , , , , ,

5 Responses to “Implementing doubletap on iPhones and iPads”

  1. anonymous September 5, 2012 at 4:13 pm #

    The major problem of this solution is the event used on iDevice. With touchend, you can’t have the position where you doubletaped.
    However, it seems that the “tap” event featuring in jQuery Mobile works great.

    Nevertheless, this article is pretty good and i must thank you for helping me :) !

  2. Erwin H September 27, 2012 at 3:54 pm #

    You can achieve the same functionality with this ‘simple’ function:

    Example:
    simulateDblClickTouchEvent($(‘#example’));

    returns true or false when attached or not attached.

  3. Jared Verdi February 11, 2013 at 6:38 pm #

    Nice approach. You may also want to consider taking scroll position into account, to prevent issues when quickly scrolling and you happen to tap on the same object twice:

    Inserting at line 28:
    var scrollTop = $(window).scrollTop();
    var lastScrollTop = $(this).data(‘lastScrollTop’) || 0;
    var scrollDelta = scrollTop – lastScrollTop;

    And in the line 29 conditional:
    if (delta0 && scrollDelta<25)

    And finally recording scrollTop after line 42:
    $(this).data('lastScrollTop', scrollTop);

  4. David May 29, 2013 at 8:05 pm #

    Hi,
    Is there a working demo I can view?
    Could I add this to a button so it will do one thing when single clicked, and another when double clicked?
    Thanks

Leave a Reply

Create Mobile Websites In Minutes

Build Professional Mobile Websites

Read more about our Appcropolis Mobile Builder.

Over 50% of Internet traffic originates from smartphones and mobile devices. Use Appcropolis Mobile Builder to create your next mobile website. Save time, money, and increase your productivity.

About Our Mobile Builder →

1,000's Of Mobile Templates

Discover and download mobile templates from our Template Gallery

Start with the end in mind. Download any of our mobile templates and learn directly from the code. Save time using the Appcropolis Mobile Builder to create advance pages in just a few clicks.

Check out our Templates →

Get Updates from our Newsletter

Check out the latest news about mobile development and get notifications about new articles and templates added to the site

Stay in touch! When you subscribe to any of the Appcropolis newsletters we will send you only the information that is relevant to you. Learn out about the Appcropolis Mobile Builder and our new mobile templates.

Learn more →

Learn more about Appcropolis Mobile Builder.

' . get_option('firstvisit_successmessage') . '