Search code examples
jquerytimerclickdouble-click

How can jQuery be used to handle timer in click, dblclick separation


I am using the jQueryFileTree at http://abeautifulsite.net/notebook/58 and I want to distinguish between the dblclick and click events as a click is always triggered by a dblclick.

Googling about led to be a technique in which click is handled by a timer which kicks in when a dblclick does not cancel it.

Is there some way this can be used with jQuery and the jQuery example in an elegant manner?


Solution

  • You can use setTimeout() and clearTimeout() to realize the timer functionality:

    var timeout;
    var delay = 500;  // Delay in milliseconds
    
    $("...")
        .click(function() {
            timeout = setTimeout(function() {
                // This inner function is called after the delay
                // to handle the 'click-only' event.
                alert('Click');
                timeout = null;
            }, delay)
        }
        .dblclick(function() {
            if (timeout) {
                // Clear the timeout since this is a double-click and we don't want
                // the 'click-only' code to run.
                clearTimeout(timeout);
                timeout = null;
            }
            // Double-click handling code goes here.
            alert('Double-click');
        }
    ;