Question

In jQuery I got a function that executes on a click, but another on a double click, the problem is that when I double click on it it clicks 2 times and do a double click so 3 executions…

here is my code :

$('.listCat li').on({
    click: function() {
        $(this).toggleClass("on");
        refresh();
    },
    dblclick: function() {
        $('.listCat li.on').removeClass('on');
        $(this).addClass("on");
        refresh();
    }
});

I was thinking in the click to make a small delay and detects if there is a doubleclick, otherwise launch refresh().

Do you think of a nice clean way to do that ?

Thank you.

Answer 1

The docs for jQuery .dblclick suggest that you don’t use them together:

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

Workaround

If you must do this, there is a workaround on this question (as pavan mentioned in a comment on your question). I wouldn’t completely trust it, though. As the jQuery docs say, the length of a double-click is often user configurable.

Also see this question: jQuery: Suppress `click` when `dblclick` is imminent?