Create a gist now

Instantly share code, notes, and snippets.

@ncr /README
Created May 13, 2010

Embed
What would you like to do?
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

This comment has been minimized.

Show comment
Hide comment
@nugged

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

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

This comment has been minimized.

Show comment
Hide comment
@ncr

ncr Jun 3, 2010

Updated. Thanks Andrew!

Owner

ncr commented Jun 3, 2010

Updated. Thanks Andrew!

@jennevdmeer

This comment has been minimized.

Show comment
Hide comment
@jennevdmeer

jennevdmeer Jun 20, 2010

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

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

This comment has been minimized.

Show comment
Hide comment
@ncr

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

Owner

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

This comment has been minimized.

Show comment
Hide comment
@webxl

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

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

This comment has been minimized.

Show comment
Hide comment
@CharlieSheather

CharlieSheather Mar 2, 2011

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?

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

This comment has been minimized.

Show comment
Hide comment
@amsoell

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

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

This comment has been minimized.

Show comment
Hide comment
@dereklucas

dereklucas Sep 28, 2012

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

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

@aneudy1702

This comment has been minimized.

Show comment
Hide comment
@aneudy1702

aneudy1702 Aug 28, 2013

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!

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

This comment has been minimized.

Show comment
Hide comment
@kongya

kongya Sep 19, 2013

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

kongya commented Sep 19, 2013

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

@romiras

This comment has been minimized.

Show comment
Hide comment
@vnnvanhuong

This comment has been minimized.

Show comment
Hide comment
@vnnvanhuong

vnnvanhuong Jul 22, 2015

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

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

@lvzhenbang

This comment has been minimized.

Show comment
Hide comment
@lvzhenbang

lvzhenbang Dec 20, 2017

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

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