As you are aware of the mouse click events, it actually triggers multiple events in the process of a one single click.

Some explanation can be taken from here.

  1. onmousedown
  2. onmouseup
  3. onclick – successful consequtive onmousedown and onmouseup event on the same control will trigger an onclick event
  4. ondblclick – two event cycles of onclick event has to trigger this event

If you find a situation where you have to use the CLICK event and DOUBLE CLICK event on the same control. Then you will see onclick event get fired twice and then afterward double click event is fired. Most of the time people demand such functionality on data grids or tables for Row Level (aka. <tr> tags)  event handling/behaviors.

Jquery site also explain that it is inadvisable to bind both handlers but world demands much more than limitations.

But if you wanted to fire only the double click event but not the click events when a double click is occurred, well… that’s not doable. But there are ways that you can tackle with it. That is using timing events in javascript.

Declare a global variable to assign the reference of the setTimeout() function. So that you can clear it later. I name the variable as “alreadyclickedTimeout”

   if (alreadyclickedTimeout) clearTimeout(alreadyclickedTimeout);
   alreadyclickedTimeout = setTimeout(function(){ 
      //write what you want to do on click event
   }, 300); //300ms is sufficient to delay the next click event before dblclick event is identified, but this is system/user dependent value
   //Now first and foremost what you have to do is to stop the click event before it get fired
   //Write what you want to do on dblclick event

Above is a pretty simple code to handle the issue, but remember that it might fail if the user have assign a larger value to the double click event interval. More information on how to change that value can be found here

Because 900 mili-seconds value is the maximum in windows OS (it might vary in other OSes), if user’s actual speed is 400ms for the dbl click and system setting is 900ms, by the time of second click is occurred, the first click event’s function will be executed already. Afterward the dblclick event will get fired.

I have written a complete solution to handle  this situation. The sample code is shared here.

I have considered 900ms as the click event trigger time.  If you want to consider a more worst case scenario in some other OS, you can change 900 to a slightly bigger value.

Note: Don’t increase more than 1000ms, you don’t want your users to feel a doubtfulness in your system whether it works or not.

Also I think 900ms won’t be a problem, because you are planning to use single click and double click on the same control, of course the behaviors on that control is going to be complex and users are aware of it and I expect them to be bit more advanced users.

Note: Don’t give these type of features in public sites, it confuses the users, rather better to use a row level button or anchor element. But for corporate applications, such requirements are fine.

Happy coding!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s