JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tap"></div>
<div class="taptap"></div>
<div class="taptap"></div>
<span></span>
<p></p>

CSS

div {
    width: 200px ; height: 200px ;
}

.tap {
    background-color: lightblue ;
}

.taptap {
    background-color: tomato ;
}

JavaScript

(function($){

var hasTouch = /android|iphone|ipad/i.test(navigator.userAgent.toLowerCase()),
eventName = hasTouch ? 'touchend' : 'click';

/**
* Bind an event handler to the "double tap" JavaScript event.
* @param {function} doubleTapHandler
* @param {number} [delay=300]
*/
$.fn.doubletap = function(doubleTapHandler, delay){
delay = (delay == null) ? 300 : delay;
 
this.bind(eventName, function(event){
var now = new Date().getTime();
 
// the first time this will make delta a negative number
var lastTouch = $(this).data('lastTouch') || now + 1;
var delta = now - lastTouch;
if(delta < delay && 0 < delta){
// After we detct a doubletap, start over
$(this).data('lastTouch', null);
 
if(doubleTapHandler !== null && typeof doubleTapHandler === 'function'){
doubleTapHandler(event);
}
}else{
$(this).data('lastTouch', now);
}
});
};
 
})(jQuery);

$(document).ready(function(){
    $('.tap').on('click',function(){
        $('span').text('CLICK');
    });
    $('.taptap').on('dblclick',function(){
        $('p').text('CLICK');
    });
    $('.taptap').doubletap(function(){
        $('span').text('DBLCLICK');
    });
});