Detect Double Tap on iPad or iPhone Screen Using JavaScript

Touch device, Single and Double Tap Events handler jQuery/Javascript?

If you want to target mobile then you can use touchstart which is the touch equivalent of mousedown. though touch capable desktop browsers can also use this so maybe you still need to do user-agent detection if that doesn't suit you. Last I checked, there wasn't any built in "double tap" event we can hook onto, but we can manually check for a tap or a double tap. The code would look something like

var tapped=false
$("#mini-cart .dropdown-toggle").on("touchstart",function(e){
    if(!tapped){ //if tap is not set, set up single tap
      tapped=setTimeout(function(){
          tapped=null
          //insert things you want to do when single tapped
      },300);   //wait 300ms then run single click code
    } else {    //tapped within 300ms of last tap. double tap
      clearTimeout(tapped); //stop single tap callback
      tapped=null
      //insert things you want to do when double tapped
    }
    e.preventDefault()
});

Demo

This should work on any touch enabled browser.

An alternative, though a bit heavy for just this, is to use Hammer.js. It's a really nice library for handling touch events. And it also aggregates mouse and touch events into one type of event. For example, for tap and double tap it'll essentially be

Hammer(el).on("tap", function() {
    //singletap stuff
});
Hammer(el).on("doubletap", function() {
    //doubletap stuff
});

This also works for mouse events too, which might not be what you want. And it is a bit overkill if it's just for this. But if you plan to do more touch related stuff, I would recommend using this library.

Disable Double Tap To Click On Touchscreen iOS Devices

Looks like I found a solution.

https://github.com/ftlabs/fastclick

FastClick fixes this issue, and removes the 300ms delay issue with some mobile browsers.

Just include the library in <script> tags, and then initiate it using jQuery, or whatever you prefer:

$(document).ready(function() {
    FastClick.attach(document.body);
});

Just to explain briefly why the issue occurs:

When an element is hidden, for example when it has a CSS property of any of the following:

display: none;
opacity: 0;
visibility: hidden;

And the hover state of the hidden element then shows the element, iOS doesn't fire a click event on the first touch, it forces the hover state (to show the element). The user then needs to touch the element again for a click event to fire.

I see why this has been added, but I think I'd rather iOS didn't do this, and then developers would just need to tailor their websites to not hide content that coud be vital.

iPad/iPhone hover problem causes the user to double click a link

Haven't tested this fully but since iOS fires touch events, this could work, assuming you are in a jQuery setting.

$('a').on('click touchend', function(e) {
    var el = $(this);
    var link = el.attr('href');
    window.location = link;
});

The idea is that Mobile WebKit fires a touchend event at the end of a tap so we listen for that and then redirect the browser as soon as a touchend event has been fired on a link.

Doubletap in Ipad using Jquery

Finally i used this code.

var elm1 = document.getElementById('test1');
var elm2 = document.getElementById('test2');
var timeout;
var lastTap = 0;
elm1.addEventListener('touchend', function(event) {
var currentTime = new Date().getTime();
var tapLength = currentTime - lastTap;
clearTimeout(timeout);
if (tapLength < 500 && tapLength > 0) {
    elm2.innerHTML = 'Double Tap';
    event.preventDefault();
} else {
    elm2.innerHTML = 'Single Tap';
    timeout = setTimeout(function() {
        elm2.innerHTML = 'Single Tap (timeout)';
        clearTimeout(timeout);
    }, 500);
}
lastTap = currentTime;
});