JSFiddle - React, Tailwind, and code Playground

HTML

This is it
<h1 id="detectme" >HELL0</h1>
<hr>
<a href="#" >This is an A</a>
<hr>
<img src="http://fotos.musicaimg.com/minifotos/0_5976_4.jpg" />
<hr>
    <button>Hello</button>

CSS

.clicked {
    opacity:0.7;
}

JavaScript

/** 
* disable double click 
**/
console=console || {};
console.log=console.log || {};

jQuery(document).ready(function() {
    jQuery(document).on('click', function(event) { 
        var target = event.target;
        if (target.tagName==='A' || target.tagName==='IMG' || target.tagName==='BUTTON' ) {

            if ( jQuery(target).data("clicked") )  {
            	console.log('Target',target.tagName,' Already Clicked');
                event.stopPropagation();
                event.preventDefault();
                console.log("double click event disabled");
                return false;
            } else {
            	console.log('Target',target.tagName,' not Clicked yet');
                jQuery(target).data("clicked", true);
                jQuery(target).prop('disabled', true);
                jQuery(target).addClass("clicked");

                setTimeout(function() 
                    {
                        jQuery(target).data("clicked", false);  
                        jQuery(target).prop('disabled', false);
                        jQuery(target).removeClass("clicked");
                        console.log('You can click Again!');
                    }, 5000); // Do something after 5000 millisecondes  
                return true;
            }
        } else {
        	console.log('Target was a ',target.tagName,' will not trigger any actions');

        }

        });

});