JSFiddle - React, Tailwind, and code Playground

by cFreed

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>

CSS

.click-area {
    margin: 1em 0;
    border: 1px solid #000;
    padding: 0 .5em;
}
.comment {
    margin: .5em 0;
    font-size: 80%;
}
h1 {
    font-weight: bold;
}

JavaScript

var do_click;
//
$(document).ready(function(){
  // simple handling for event display:
  $('#simple-event-display').
    bind('click',function(){
      $('#display-area').html('Click');
    }).
    bind('dblclick',function(){
      $('#display-area').html('DblClick');
    })
    ;
    // simple handling for event alert:
    $('#simple-event-alert').
    bind('click',function(){
      alert('Click');
    }).
    bind('dblclick',function(){
      alert('DblClick');
    })
    ;
// managed handling for event alert:
  $('#managed-event-alert').
    bind('click',function(){
      do_click=true;
      setTimeout("doClick()",500); // delay yet to be fine tuned...
    }).
    bind('dblclick',function(){
      do_click=false;
      alert('DblClick');
    })
    ;
});
function doClick() {
  if(do_click) {
    alert('Click');
  }
}