Detect double tap on ipad or iphone screen using javascript

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

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.

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>