You must cancel the click / mouseup events when a double click is detected

Question

How it's done?

Answer 1

This is a good question, and I really don't think it can be done easily. ( Some discussion about this )

If super duper is important to you, you can crack it like this:

function singleClick(e) { // do something, "this" will be the DOM element } function doubleClick(e) { // do something, "this" will be the DOM element } $(selector).click(function(e) { var that = this; setTimeout(function() { var dblclick = parseInt($(that).data('double'), 10); if (dblclick > 0) { $(that).data('double', dblclick-1); } else { singleClick.call(that, e); } }, 300); }).dblclick(function(e) { $(this).data('double', 2); doubleClick.call(this, e); }); 

And here is an example of this at work .

As stated in the comments, there is a plugin for this that does what I did above to a large extent, but its packages are for you, so you don't need to see the ugly ones: FixClick .

Answer 2

Raymond Chen discussed some of the consequences of a single click - although he says in the context of Windows that he says it has to do with browser-based user interface design.

In principle, an action performed by a double click should be the logical thing to do after one click. So, for example, in the user interface of the desktop, one click selects an item, and double-clicking opens it (for example, opens a file or launches an application). The user will have to select a file to open it anyway, so it doesn’t matter that the one-click action is performed before the double-click action.

If you have a user interface component whose double-click action is not completely related to the one-click action, so it becomes necessary to prevent a one-time action when the system realizes that it is actually a double click, then you really need to rethink your design. Users will find this inconvenient and inconsistent, because it will not act the way they are used to doing.

If you still want to go this route, you will either have to use the debouncing method (in this case, all actions with one click will be postponed), or implement some mechanism by which the double-click handler cancels the work performed by the single-click handler.

You should also be aware that some users have set a very long double-click time. Someone who, for example, has arthritic hands, can double-click more than the second set in their system preferences, so the debouncing method, based on some arbitrary time period of your choice, will make your user interface component inaccessible to these people, if the adoption of a single click action excludes the adoption of a double-click action. To my knowledge, the “undo what just happened with one click” method is the only viable workaround.

Answer 3

The technique described in the other answers is called debouncing .

Answer 4

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 the source code for defining a custom event here .

It is open source under the AGPL license, so you can freely take whatever you need without problems! :-) 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 that this will help to achieve this goal!

Answer 5

If this is for the button representing the form (which does not necessarily apply to the original poster, but maybe for other people coming here through Google), a simpler option would be to disable the element that is click in the click event handler:

 $(selector).click(function(e) { $(this).prop('disable', true); }