Assigning different behaviors on click & doubleClick

This interesting issue was posted by Arpan on the flex_india group (Read it here). He says…

In my application i have a datagrid with itemrenderer as charts and I need have to perform two operations – one on single click and one on double click – on the chart. But most of the times double click event is not fired and if fired then single click is also fired. Can I stop single click event if double click event is fired ?

I investigated this and found this to be true. Once you enable doubleClick (by setting the doubleClickEnabled flag), whenever it occurs, a click event is also fired with it… I discussed this with Sreeni and he said that this is because the framework intends not to skip any event (because a double click is actually a click followed by a doubleClick event).

This may be useful in a lot of cases, but in Arpan’s case, this was causing havoc. The way to work around this is to write a Timer/Interval and use it to work around the problem. The following is the execution path…

  • On click, in the click handler, reset and initiate the timer which on complete, calls the deferredClickHandler (where the actual clickHandler code sits
  • If doubleClick does not occur, the timer completes and then executes the deferredClickHandler (I have kept my timer to be 300 mS)
  • If doubleClick occurs, it goes to the doubleClick handler, where you clear the timer (so that timer does not complete and execute the deferredClickHandler) and execute the doubleClickHandler code…

Caution: Do not forget to save the initial click Event if you need it later..

In Arpan’s case… he needs to use itemClick and itemDoubleClick events (of type ListEvent) instead of click & doubleClick (of type MouseEvent), as it is a DataGrid. The code below handles the case for both a DG & a Button… I have used the setInterval() method to implement the timer, you may as well use the Timer class…

Application | Source

Thanks to Sameer & Harish who helped me get to the bottom of this…


9 Responses to Assigning different behaviors on click & doubleClick

  1. Faisal Abid says:

    Well.. if you go to the hitme button and click again and again at a constant speed youll notice both events are being fired one after the other

  2. raghunathrao says:

    Hi Faisal… I’m not able to reproduce what you are seeing. Anyone else seeing this??

  3. Josh says:

    I get the same thing. The trick is to find the right clicking speed. Too fast, and you only get double-click events, too slow and you only get clickEvents. This is the output I got for a constant clicking speed (at least as constant as I can).

    doubleClickHandler clickHandler doubleClickHandler clickHandler doubleClickHandler clickHandler doubleClickHandler clickHandler doubleClickHandler doubleClickHandler clickHandler doubleClickHandler clickHandler doubleClickHandler clickHandler doubleClickHandler

  4. Jim says:

    The unfortunate issue that crops up with your code in this instance, is that not all computers have their double click speed set to less than 300ms. So, if my double click speed is set to 500ms (still pretty quick), you’ll see both the single and double click events.

    The best solution that I can see, is to just check for another click within your predetermined time frame… but that forces your user to ignore their computers double click settings.

  5. madhur says:

    I have a sprite, wherein i want to perform one action if clicked once( i.e., single click) and simultaneously one more action if clicked twice( ie. double click ).
    But if i keep added 2 events for this, single click listener is been listening to the event, even if i do double click.

    I would be very thankful i could expect solution to this problem.

  6. Varun says:

    hello sir.
    i m trying to get the radiobutton value from jsf and getting it in flex
    According to radiobutton value i want show differnt charts
    how do i do that?
    pls help me

  7. monika sharma says:

    I want the same thing in the Bar chart.
    In my functionality, I need to assign diffrent behaviour to both the events but I am not able to do it.
    Every time, itemClick event is fired, itemDoubleClick event never fired.
    Although I am doing everything is rite like

    it always goes in to the function itemClickCode(event)

    Can you please suggest something?

    Monika Sharma

  8. monika sharma says:


    I am able to do it for charting also.
    same way I inserted the delay in the handler.


  9. Savan Patel says:

    Hi Guys,

    I am also facing same issue. Thought to find out if there is any alternate of Timer is there or not.. but it seems we do not have any other solution as per this blog.

    I am using DataGrid control and need to use both the events,, itemClick and itemDoubleClick.. so please let me know whats the proper solution for this..

    Looking forward for your suggestions and comments..

    Thanks in Advance,

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