Bind Different 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.

function doClickAction() {
  $("#click h2").append("•"); 
function doDoubleClickAction() {
  $("#double-click h2").append("•"); 

var timer = 0;
var delay = 200;
var prevent = false;

  .on("click", function() {
    timer = setTimeout(function() {
      if (!prevent) {
      prevent = false;
    }, delay);
  .on("dblclick", function() {
    prevent = true;
Check out this Pen!
Deploy a static site in one minute
Build and deploy a CMS-enabled site with Gatsby in just a few clicks. It's free.


  1. User Avatar
    Permalink to comment#

    Try click, click then double click, your script fail

  2. User Avatar
    Radek Surani
    Permalink to comment#

    Thanks, it’s very helpful to me.

  3. User Avatar
    Permalink to comment#

    in the moment the double click selects the text automaticly a normal click is assigned?

  4. User Avatar
    Jan Peša
    Permalink to comment#

    This script obviously fails if your OS dblclick threshold is higher than 200ms (and mostly is). Just click again after the “click” dot appears – most probably “double click” dot will be added, that’s because your script already finished the timer but OS is still of course considering the second one as double click but has nothing to cancel.
    The right solution is to have single click event handler and check whether you have running timer – if so, cancel it and do double click action. The finished timer itself will do single click actions.

  5. User Avatar
    Permalink to comment#

    This is working fine in Chrome, but not in IE. Any work around for IE??

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.