Detect double tap on ipad or iphone screen using javascript

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?

Solution 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();

}

Solution 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.

Solution 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> 

Solution 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");

    }
}

Solution 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;
});