Detect double tap on ipad or iphone screen using javascript

Question

I'd like to detect if a user has double tapped on an ipad or iphone.

Does a javascript-event exist which would provide this functionality?

Answer 1

This could be used for a double tap or a double click. In pure javascript:

var mylatesttap;
function doubletap() {

   var now = new Date().getTime();
   var timesince = now - mylatesttap;
   if((timesince < 600) && (timesince > 0)){

    // double tap   

   }else{
            // too much time to be a doubletap
         }

   mylatesttap = new Date().getTime();

}

Answer 2

One basic idea is to do it like this:

1. In order to create a double-tap (or double click) event you need to create code on the onClick event.

2. The reason you most likely want double-tap/click is because you already have something attached to the onClick event and need a different gesture on the same element.

3. This means that your onClick event should only launch the onClick event after a setTimeout() is acknowledged.

4. So the basic code would launch the function attached to the onClick event using a setTimeout() command. The first click says "Start timer + run function using setTimeout() after say..500 milliseconds. The second time you clicked, you would check to see if the second click was inside a specific time frame in order to count as a double tap. So if the End time was less than 500 milliseconds, you would cancel the setTimeout() using clearTimeout() and then launch a completely different function (the function you wanted to launch for double tab/click)

5. Stopping default action? - Probably somthing like stopPropagation() or cancelBubble() would do the trick. Honestly, I don't know but that's where I'd start researching.

Answer 3

Detect Double Tap

try the following snippet on a touch device

event.preventDefault() will disable double tap zoom on div#double-tap

document.getElementById("double-tap").addEventListener("touchstart", tapHandler);

var tapedTwice = false;

function tapHandler(event) {
    if(!tapedTwice) {
        tapedTwice = true;
        setTimeout( function() { tapedTwice = false; }, 300 );
        return false;
    }
    event.preventDefault();
    //action on double tap goes below
    alert('You tapped me Twice !!!');
 }
   

div#double-tap {
  height: 50px;
  width: 200px;
  border: 1px solid black;
  background-color: lightblue;
  line-height: 50px;
  text-align: center;
  margin: 50px auto;  
}

<div id="double-tap">Double Tap Me !!!</div> 

Answer 4

I created this one in JavaScript and it seems to work well. (I tested it on my iPad 2.) It is basically the code for what is said above.

var clickTimer = null;

function touchStart() {
    if (clickTimer == null) {
        clickTimer = setTimeout(function () {
            clickTimer = null;
            alert("single");

        }, 500)
    } else {
        clearTimeout(clickTimer);
        clickTimer = null;
        alert("double");

    }
}

Answer 5

I found this solution on Stackoverflow somewhere but forgot what exact post. It works for a doubleclick on a browser and double tap on iPhone.

I use 'touchend click' to detect the double click on both browser and iPhone. To implement just on iPhone, remove the click.

var timeout;
var lastTap = 0;

$('element').on('touchend click',function(e){
    var currentTime = new Date().getTime();
    var tapLength = currentTime - lastTap;        

    e.preventDefault();
    clearTimeout(timeout);

    if(tapLength < 500 && tapLength > 0){

        //Double Tap/Click

    }else{

        //Single Tap/Click

        timeout = setTimeout(function(){
            //Single Tap/Click code here

            clearTimeout(timeout); 
        }, 500);
    }
    lastTap = currentTime;
});

Answer 6

Double tap on an iPad is tricky because the browser, by default, absorbs this event as a "zoom" event, as seen here:

However, if you cancel the default behavior, you can grab the doubletap yourself. Here's an example of a plugin that does this for you-- the jQuery doubletap plugin.

Answer 7

Might be late (Actually yup it's damn late), but the pure and easy JS solution for those lurking in the future:

var tapped="";
function dbtapper(elem=false,arg1, arg2, arg3, timer=1400){
    if(tapped==""){
        //Here is single tap

        tapped = setTimeout(function(){tapclean()}, timer)
        lastclick = elem;
        //variable lastclick is to prevent double clicking from happen
        //when clicking different object with double-click listener.

    } else if(lastclick==elem){
        //Here is double tap, if you want more (triple&beyond),
        //add doubletap/tripletap checker variable into tapclean().
        //and set it to true here!, example included.
        //you could also add more setTimeout to var-tapped so user will
        //have more time to do triple&up taps.

        tapclean();
        //doubletapped=true;
        mypersonalfunc(arg1, arg2, arg3);
    } else {
        tapped = setTimeout(function(){tapclean()}, timer);
        lastclick = elem;
}
}
function tapclean(){
    clearTimeout(tapped);
    tapped="";
    //doubletapper=false;
}

With this you can easily make single tap event, double, triple, fourth,... to infinity and beyond!
Notice: to use element checking, call the function like:
dbtapper(YOURELEMENT), ie: <span onclick="dbtapper(this)">Click Me</span>

It's not forced tho, you can use it without just fine (dbtapper()), but if you need to pass argument into the function make sure you type false for the first argument if you doesn't point it to the element.

Without element pointer: dbtapper(false,yourarguments)
With element pointer: dbtapper(document.getElement*******,yourarguments)
Alternatively, you can use an unique elem arg for each element:
                    dbtapper('omega',yourarg) or dbtapper(69,yourarg)
Though this is not recommended if you have a huge amount of double tapping elements.

Answer 8

based on latest jquery docs, double tap implementation

https://gist.github.com/attenzione/7098476

Answer 9

technoweenie's jquery.doubletap does and this link: jQuery mobile events finally launched seems to be able to solve the task ...

Answer 10

You could also use jquery.finger which supports delegated events.

Answer 11

You could use jQuery mobile library to build your application: http://jquerymobile.com/ ; it has plenty of touch events built in. Also you could try jQuery touch library : http://jqtouch.com/