-
-
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); | |
} | |
}); | |
}); | |
} |
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.
let's make "event" passed to callback functions: