JSFiddle - React, Tailwind, and code Playground

HTML

<div></div><span>Double click the block</span>

CSS

div { background:blue;
    color:white;
    height:100px;
    width:150px;
}
div.dbl { background:yellow;color:black; }

JavaScript

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
    return this.each(function() {
        var clicks = 0,
            self = this;
        jQuery(this).click(function(event) {
            clicks++;
            if (clicks == 1) {
                setTimeout(function() {
                    if (clicks == 1) {
                        single_click_callback.call(self, event);
                    } else {
                        double_click_callback.call(self, event);
                    }
                    clicks = 0;
                }, timeout || 300);
            }
        });
    });
}

$("div:first").single_double_click(function() {
    alert("Try double-clicking me!")
}, function() {
    alert("Double click detected, I'm hiding")
    $(this).hide()
});