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

Question

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?

Answer 1

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

Answer 2

Jquery has a timer class at http://plugins.jquery.com/project/timers which implements timer class, and has the ability to set labels to timers. Cancelling a timer for a particular event is a task of using the stopTime function with the timers label.

For those interested this is the code used.

It seems I don't have the permissions to paste code, but it is simple enough to apply once you examine the examples on the website.

Answer 3

jQuery Sparkle provides a clean elegant solution for this, by implementing a singleclick custom event. By doing this, you can use it just like any other event, so:

$('#el').singleclick(function(){});
// or event
$('#el').bind('singleclick', function(){});

It also provides custom events for the last and first clicks of a series of clicks. And the lastclick custom event actually passes the amount of clicks back! So you could do this!

$('#el').lastclick(function(event,clicks){
    if ( clicks === 3 ) alert('Tripple Click!');
});

You can find the appropriate demo showcasing what I've just said right here: http://www.balupton.com/projects/jquery-sparkle/#event-singleclick

And the source code for defining the custom event right here: http://bit.ly/diBCkI

It's open source under the AGPL licence, so you can feel free to grab what you need out of it worry free! :-) It's also actively developed on a day to day basis so you will never be short on support.

But most importantly it is a DRY Plugin/Effect Framework to allow you to develop plugins and extensions much more easily. So hope this helps to achieve that goal!

You can find more about jQuery Sparkle, and see some demos of it right here at it's homepage: http://www.balupton.com/projects/jquery-sparkle

Hope I've helped!