JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="parent_div">
  <img id="my_button1" width="100" src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" />

  <img id="my_button2" width="100" src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" onclick="my_button2_clicked()" />

  <div id="double_click_div"></div>
</div>

CSS

#parent_div {
display:inline-block;  
position:relative;
}

#double_click_div {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display:none;
}

JavaScript

$(window).ready(function() {
	$("*").on("dblclick", function(e){
		e.preventDefault();
		e.stopPropagation();
	});
  
  jQuery("*").on("click", function(e){
    if (jQuery(this).attr('id') != "double_click_div") {
      jQuery('#double_click_div').css('display', 'block');
      setTimeout(function () {
        jQuery('#double_click_div').css('display', 'none');
      }, 400);
    }
    else
    	alert('caught!');
  });
  
  do_bind_click();
});

function do_bind_click() {
  $('#my_button1').one('click', function(e) {
    console.log(">>> click 1 <<<");
    e.preventDefault();
    e.stopPropagation();
    do_bind_click();
  });
}

function my_button2_clicked(e) {
	console.log(">>> click 2 <<<");
  event.preventDefault();
  event.stopPropagation();
}