JSFiddle - React, Tailwind, and code Playground

HTML

<button id="test">click me</button>

JavaScript

// ms to wait for a doubleclick
var doubleClickThreshold = 300; 
// timeout container
var clickTimeout;

$('#test').on('click', function(e) {
    var that = this;
    var event;
    
    if (clickTimeout) {
        try {
            clearTimeout(clickTimeout);
        } catch(x) {};

        clickTimeout = null;
        handleDoubleClick.call(that, e);
        return;
    }
    
    // the original event object is destroyed after the handler finished
    // so we'll just copy over the data we might need. Skip this, if you
    // don't access the event object at all.
    event = $.extend(true, {}, e);
    // delay click event
    clickTimeout = setTimeout(function() {
        clickTimeout = null;
        handleClick.call(that, event);
    }, doubleClickThreshold);
    
});

function handleClick(e) {
    // Note that you cannot use event.stopPropagation(); et al,
    // they wouldn't have any effect, since the actual event handler
    // has already returned
    console.log("click", this, e);
    alert("click");
}

function handleDoubleClick(e) {
    // this handler executes synchronously with the actual event handler,
    // so event.stopPropagation(); et al can be used!
    console.log("doubleclick", this, e);
    alert("doubleclick");
}