README

Code

$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})


Markup

<button>Click Me!</button>

jquery.single_double_click.js

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

Updated. Thanks Andrew!

The jQuery post was indeed removed. Anyhow it could be just me but when I use this in IE it seems to miss out on A lot of clicks. Like half of em, if I go for a double click I have to actually click 3 times for it to hit.

Like I said it might be just me, but wanted to let you know (and possibly get a fix for it for myself if you can)

My test file can be found at http://pastebin.com/USd9k7N3

I'd happily test it but I don't have access to IE here, no vboxes/vmwares installed so it will be hard ;) Have you tried to debug it a bit? Like putting console.log("whatever") between the lines - in such short code this proves to be the fastest debugging method I know ;)

This seems to work in ie7 & 8. Not sure if the 2nd (non-msie) block is necessary because the 1st works in FF3.6 too.

$.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
return this.each(function() {
    var clicks = 0, self = this;
    if ($.browser.msie) { // ie triggers dblclick instead of click if they are fast
        $(this).bind("dblclick", function(event) {
            clicks = 2;
            double_click_callback.call(self, event);
        });
        $(this).bind("click", function(event) {
            setTimeout(function() {
                if (clicks != 2) {
                    single_click_callback.call(self, event);
                }
                clicks = 0;
            }, timeout || 300);
        });
    } else {
        $(this).bind("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);
            }
        });
    }
});
}

Wondering if anyone has used this in conjunction with jQuery .live() ? I'm trying to bind the single_double_click() event to an element that is created dynamically? Any ideas?

@CharlieSheather: I was dealing with the same sort of issue today, and I couldn't find a way around it. I ended up basically just chopping this function up and using it inside each .live() event I called. For example:

    var clicks = 0;
    $('li').live({
      click: function() {
        node = $(this);
        clicks++;
        if (clicks == 1) {
          setTimeout(function() {
            if(clicks == 1) {
              console.log('single click!');
            } else {
              console.log('double click!');
            }
            clicks = 0;
          }, 300);
        }
      }      
    });

I've only tested this in Chrome so far, so it may have issues in other browsers, but it's a place to start if you don't have to set this up on a TON of objects.

In case anyone wants it I popped this into a JSfiddle to play with it easier:
http://jsfiddle.net/mBYPD/

very useful piece of code! I just adapted it so it makes my html5 videos go full screen on android devices. Thanks a lot for sharing!

jQuery(this).dblclick(function(event) {
jQuery(this).click().click();
});
Then manual dblclick trigger the double_click_callback.

http://jsfiddle.net/Lhnqswpb/
for jQuery 1.9.1

Thanks a lot for sharing. It solved my issue too that's related to the events "rowDblselect" and "rowSelect" of Primefaces' dataTable. :)

it's a good idea. but test result is when IE< 9 has a problem.