Lets dig in ;)

Line 1 imports the mouse event class that we gonna use to add mouse event listener to a simple button.

Line 3 adds an mouse event listener to a button whose instance name is btnClickDoubleClick, ClickDoubleClick listens to the CLICK mouse event.

Line 4 this variable determines the double-click speed. You can play around with the number and see what suits you best. 300 milliseconds works fine for me.

Line 5 I will get back to this when I explain the listener function ClickDoubleClick.

 Line 16-19 you can put anything that you want to execute for single-click event. And you must reset m_toMouse back to undefined, I will explain why.

Line 21-24 you can put anything that you want to execute for double-click event. And you must reset m_toMouse back to undefined, now its time to understand the mystery behind everything.

Basically there are two states in which the system stays, I call them initial state and clicked state. Initial state when no click has happened. Clicked state between first-click and second-click. Lets dive into our listener function.

Line 7-14 Where the magic happens. The system is in initial state, on first click it checks m_toMouse  and goes to the else statement.setTimeOut runs a specified function (here HandleSingleClick) after a specified delay in milliseconds (i.e. our double click speedm_nDoubleClickSpeed), and it returns a unique numeric identifier for the timed process in our case HandleSingleClick that gets assigned to m_toMouse. Now there are two possibilities either the second click happens before 300 milliseconds (double-click speed) or not.

Case 1: when second-click happens before 300 milliseconds.  Now we go into the if part if the our listener function. First thing we do is to clear our timed function, so snippet for single-click don’t get executed. Then we call our function HandleDoubleClick. You can do anything you wanna do, I am just printing function name for testing purpose. Then I reset m_toMouse back to undefined. Now the system is in initial state. Any click after this is considered as first-click.

Case 2: When the second-click doesn’t happen before 300milliseconds. As soon as it hits the 300 millisecond from the first-click our HandleSingleClick function gets executed. You can do anything you wanna do, I am just printing function name for testing purpose. Then I reset m_toMouse back to undefined. Now the system is in initial state againAny click after this is considered as first-click.