Tuesday 2 May 2017

Tag A href Events to Click and Double Click

You might want a link to have a special action when double-clicked which prevents the default action of the link (go to another page). So:
Double-click: does something special, does not do normal click event at all
Click: works as normal
You'll need to have a very slight delay on firing off the normal click action, which you cancel when the double click event happens.


script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"

$(document).ready(function(){
function doClickAction() {
  alert("Single Click");
}
function doDoubleClickAction() {
  alert("Double Click");
}

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