JSFiddle - React, Tailwind, and code Playground

by jeum

HTML

<button id="btnVanilla">Vanilla</button>
<button id="btnjQuery">jQuery</button>

JavaScript

var single = function(e){console.log('single')},
    double = function(e){console.log('double')};


  var makeDoubleClick = function(e) {
    
    var clicks = 0,
        timeout;

    return function (e) {

      clicks++;

      if (clicks == 1) {
        timeout = setTimeout(function () {
          single(e);
          clicks = 0;
        }, 250);
      } else {
        clearTimeout(timeout);
        double(e);
        clicks = 0;
      }
    };
  }
	document.getElementById('btnVanilla').addEventListener('click', makeDoubleClick(), false);

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);
      }
    });
  });
}

$('#btnjQuery').single_double_click(single, double);