Skip to content

Instantly share code, notes, and snippets.

@ncr
Created May 13, 2010 08:30
Show Gist options
  • Save ncr/399624 to your computer and use it in GitHub Desktop.
Save ncr/399624 to your computer and use it in GitHub Desktop.
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>
// 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);
}
});
});
}
@nugged
Copy link

nugged commented Jun 3, 2010

let's make "event" passed to callback functions:

jQuery(this).click(function(evnt){
  clicks++;
  if (clicks == 1) {
    setTimeout(function(){
      if(clicks == 1) {
        single_click_callback.call(self, evnt);
      } else {
        double_click_callback.call(self, evnt);

@ncr
Copy link
Author

ncr commented Jun 3, 2010

Updated. Thanks Andrew!

@jennevdmeer
Copy link

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

@ncr
Copy link
Author

ncr commented Jun 22, 2010

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

@webxl
Copy link

webxl commented Jul 19, 2010

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

@CharlieSheather
Copy link

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?

@amsoell
Copy link

amsoell commented Apr 28, 2011

@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.

@dereklucas
Copy link

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

@aneudy1702
Copy link

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!

@kongya
Copy link

kongya commented Sep 19, 2013

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

@romiras
Copy link

romiras commented Sep 11, 2014

@vnnvanhuong
Copy link

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

@lvzhenbang
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment