JSFiddle - React, Tailwind, and code Playground

HTML

<div class='parent'>
    <div class='child'>Click Me</div>
</div>

CSS

.parent {
    width:200px;
    border: 1px solid black;
    padding: 5px;
}
.child {
    border: 1px solid blue;
    width: 80px;
    padding: 5px;
}

JavaScript

$('.parent').bind('dblclick', function(e) {
	alert('double click parent');
});
var alreadyclicked = false;
var alreadyclickedTimeout;
$('.child').unbind('click').bind('click',function(e){
    e.stopPropagation(); // doesn't work
    
    var $this=$(this);
    
    if (alreadyclicked) {
        alreadyclicked=false; // reset
        clearTimeout(alreadyclickedTimeout); // prevent single click action
        // do what needs to happen on double click. 
        alert('double click child');
    } else {
        // First click - set up the timeout.
        alreadyclicked=true;
        alreadyclickedTimeout=setTimeout(function(){
            // do what needs to happen on single click. 
            if(alreadyclicked) {
                alreadyclicked=false; // reset when it happens
                alert('single click child');
            }
        },250); // <-- dblclick tolerance here
    }
    return false;
});