Bind Different Events to Click and Double Click

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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.

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();
  });
Check out this Pen!