You might want a link to have a special action when double-clicked which prevents the default action of the link (go to another page). So:
Double-click: does something special, does not do normal click event at all
Click: works as normal
You’ll need to have a very slight delay on firing off the normal click action, which you cancel when the double click event happens.
function doClickAction() {
$("#click h2").append("•");
}
function doDoubleClickAction() {
$("#double-click h2").append("•");
}
var timer = 0;
var delay = 200;
var prevent = false;
$("#target")
.on("click", function() {
timer = setTimeout(function() {
if (!prevent) {
doClickAction();
}
prevent = false;
}, delay);
})
.on("dblclick", function() {
clearTimeout(timer);
prevent = true;
doDoubleClickAction();
});
Try click, click then double click, your script fail
but i think it works well!
use an array for settimeout
Thanks, it’s very helpful to me.
in the moment the double click selects the text automaticly a normal click is assigned?
This script obviously fails if your OS dblclick threshold is higher than 200ms (and mostly is). Just click again after the “click” dot appears – most probably “double click” dot will be added, that’s because your script already finished the timer but OS is still of course considering the second one as double click but has nothing to cancel.
The right solution is to have single click event handler and check whether you have running timer – if so, cancel it and do double click action. The finished timer itself will do single click actions.
any way you could give a code example fir your solution
This is working fine in Chrome, but not in IE. Any work around for IE??
THANK YOU!!!! I had an app for years that wouldn’t work in Chrome and this finally let me fix it :)
While it looks a little sloppy and bulky, it’s a brilliant solution.
Here’s a solution to enable double clicking, but not requiring JQuery’s dblclick method. It only uses click.
The line ‘var sel = this;’ isn’t necessary. Was a vestige from code.
It doesn’t work for me because it is executed as follows:
Two rapid clicks (intended as a double click) => the click event handler is executed twice, then the double click event is executed once. So setTimeout is executed twice in the click event handler, thus ‘timer’ refers to the second timeout object. This second object is cleared by the double click event, but the first timeout object is not cleared. As a result we have double click executed once, then the first single click is executed once. As a solution, in the single click event handler, before creating timer = setTimeout(…) , I do a clearTimeout(timer). Then it works as intended.
You need a mix of timeout and event.detail checks to make it work.
Check my answer on stackoverflow – https://stackoverflow.com/a/60177326/670839
It’s a good idea but when the time between 2 clicks is in range of 201ms to 500ms then both actions will be called, because time out between 2 clicks to trigger a dbclick event is 500ms (default in Window OS), so this solution is not work well in all cases.
My solution to fix this bug: