How can I use jQuery to handle a timer in a click, dblclick split

Question

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

As a result, GoogleDogging has become a method in which a click is processed by a timer that fires when dblclick does not cancel it.

Is there a way that you can use with jQuery and jQuery example in elegant form?

Answer 1

You can use setTimeout() and clearTimeout() to implement the timer function:

 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 Sparkle provides a clean, elegant solution for this by implementing a single-task custom event. By doing this, you can use it just like any other event, therefore:

 $('#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 number of clicks back! So you could do it!

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

You can find a suitable demo of what I just said here and the source code to determine the correct sign of the event here . It is open source under the AGPL license, so you can freely take whatever you need without worry! :-) It is also actively developing on a day to day basis, so you will never be short of support.

But the most important thing is the DRY Plugin / Effect Framework, which makes it much easier for you to develop plugins and extensions. Therefore, I hope this helps to achieve this goal!

Answer 3

Look at the following code

 $("#clickMe").click(function (e) { var $this = $(this); if ($this.hasClass('clicked')){ alert("Double click"); //here is your code for double click return; }else{ $this.addClass('clicked'); //your code for single click setTimeout(function() { $this.removeClass('clicked'); },500); }//end of else }); 

Demo here http://jsfiddle.net/cB484/