HTML/CSS/JS_differenciate click dbclick event

https://css-tricks.com/snippets/javascript/bind-different-events-to-click-and-double-click/

codepen ver : https://codepen.io/chriscoyier/pen/HfBtz

function doClickAction() {

  $("#click h2").append("•"); 

}

function doDoubleClickAction() {

  $("#double-click h2").append("•"); 

}

var timer = 0;

var delay = 200;

var prevent = false;

$("#target")

  .on("click", function() {

    timer = setTimeout(function() {

      if (!prevent) {

        doClickAction();

      }

      prevent = false;

    }, delay);

  })

  .on("dblclick", function() {

    clearTimeout(timer);

    prevent = true;

    doDoubleClickAction();

  });

> using boolean option for single/dbclick to differenciate

https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event

// Author:  Jacek Becela

// Source:  http://gist.github.com/399624

// License: MIT

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

      }

    });

  });

}

//Usage

$("button").single_double_click(function () {

  alert("Try double-clicking me!")

}, function () {

  alert("Double click detected, I'm hiding")

  $(this).hide()

})

<button>Click Me!</button>