public
Last active

  • Download Gist
README
1 2 3 4 5 6 7 8 9 10 11 12 13
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
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
// 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);
}
});
});
}

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

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.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.