JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Click or double-click inside of either frame below</h1>
<div class="click-area" id="simple-event-display">
    Simple event, with display &rArr;
    <span id="display-area"></span>
    <div class="comment">
        Click and double-click are well captured
    </div>
</div>
<div class="click-area"  id="simple-event-alert">
    Simple event, with alert
    <div class="comment">
        Click and double-click both cause only click to be captured, first click of dblclick immediately fires the click event, and second click happens when click handler is yet active (totally stuck in the current example).<br />
        Here we understand that, in the previous example above, dblclick was well captured only because click handler job was quick enough.
        <br />
        So when double-click:
        <ul>
            <li>undesired job (click handler) is always done</li>
            <li>expected job (dblclick handler) may be done or not, depending on click handler already achieved or not when second click happens</li>
        </ul>
    </div>
</div>
<div class="click-area"  id="managed-event-alert">
    Managed event, with alert
    <div class="comment">
        Click and double-click are well captured anew:
        <ul>
            <li>when first click is captured, it is delayed through setTimeout</li>
            <li>if a second click happens in th given delay, click handler is inhibited
        </ul>
    </div>
</div>
<div class="click-area" id="trace">
    Events trace <button>Clear</button>
    <div class="comment">
        When double-click is effective (1st and 3d examples above):
        <ul>
            <li>IE8 receives only 1 click</li>
            <li>FF, Chrome, Opera and Safari receive 2 clicks</li>
        </ul>
        When double-click is stuck (2nd example above), only the first click is received.
</div>

CSS

.click-area {
    margin: 1em 0;
    border: 1px solid #000;
    padding: 0 .5em;
}
.comment {
    margin: .5em 0;
    font-size: 80%;
}
h1 {
    font-weight: bold;
}
ul {
    list-style: square outside;
    padding-left: 1.2em;
}

JavaScript

var do_click;
//
$(document).ready(function(){
  $('button').click(function() {
    $('.trace').remove();
  });
  // simple handling for event display:
  $('#simple-event-display').
    bind('click',function(e){
      doTrace(e);
      $('#display-area').html('Click');
    }).
    bind('dblclick',function(e){
      doTrace(e);
      $('#display-area').html('DblClick');
    })
    ;
    // simple handling for event alert:
    $('#simple-event-alert').
    bind('click',function(e){
      doTrace(e);
      alert('Click');
    }).
    bind('dblclick',function(e){
      doTrace(e);
      alert('DblClick');
    })
    ;
// managed handling for event alert:
  $('#managed-event-alert').
    bind('click',function(e){
      doTrace(e);
      do_click=true;
      setTimeout("doClick()",500); // delay yet to be fine tuned...
    }).
    bind('dblclick',function(e){
      doTrace(e);
      do_click=false;
      alert('DblClick');
    })
    ;
});
function doClick() {
  if(do_click) {
    alert('Click');
  }
}
function doTrace(e) {
  $('#trace').append(
      '<div class="trace">'+e.currentTarget.id+': '+
      e.type+'</div>'
  );
}