Handling Single and Double Click events

In flex, when you click on any component and if you want to perform any action, you listen to MouseEvent.CLICK event and handle it and do whatever you want in that listener/handler function. Nice. Now when you double click on any component and if you want to perform any action , you listen to MouseEvent.DOUBLE_CLICK event and handle it and do whatever you want in that listener/handler function. Nice again. But what will you do when you want to perform some action when you click on a component and perform different action when you double click on the same component. In the below example, when you click on the "Click me" buttton, a text called "This is Single Click" will be displayed in the textarea but when you double click on the "Click me" button, you will see two messages - "This is Single Click" and "This is Double Click" in the textarea. This is because when you double click, both MouseEvent.CLICK and MouseEvent.DOUBLE_CLICK are dispatched and so the result.


This is the code that will show the results as above.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    backgroundColor="#FFFFFF">

  <mx:Script>
    <![CDATA[
      private function onSingleClick(evt:MouseEvent):void {
        appendText("Single Click");
      }

      private function onDoubleClick(evt:MouseEvent):void {
        appendText("Double Click");
      }

      private function appendText(str:String):void {
        textArea.text += "This is "+ str + "\n";
      }
    ]]>
  </mx:Script>

  <mx:VBox horizontalAlign="center" verticalAlign="middle">

    <mx:Button id="button" label="Click me"
            doubleClickEnabled="true"
            click="onSingleClick(event);"
            doubleClick="onDoubleClick(event);" />

    <mx:TextArea id="textArea" editable="false" width="100%" height="100" />

  </mx:VBox>

</mx:Application>


Lets say there is a requirement like when you click on the component, the screen should be displayed and when you double click on the component, the component should become editable without displaying the screen. MMMmmmmm... This code wont work for it. Now lets see what changes has to be made for this code so that when you double click, only double click action is performed and not single click action.

To fix this problem, lets use Timer. Everytime when you click on the button - it could be single click or double click, a Single Click event is dispatched. So, to find out if you have clicked once or twice, start the Timer in the Single Click handler and wait and see for "200" milliseconds if you have clicked again (I mean if it is a double click event). If it is a double click event, then the double click event is dispatched, and the double click handler (onDoubleClick) will listen to it. Then reset the timer in this handler as you have found that it is double click event and you dont want any single click action to be performed. If no double click event is dispatched, after 200 millisecs, onTimerComplete handler function will be called where you will perform single click actions.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical"
      backgroundColor="#FFFFFF" initialize="init()">

  <mx:Script>
    <![CDATA[

      
      // This timer will be used to measure time between click and double click events.
      private var timer:Timer = null;

      // This constant must be low to have a responsive interface
      // but higher than the time between two clicks which convert them in a double click. 
      private const TIME_OUT:int = 200;


      private function init():void{
        timer = new Timer(TIME_OUT, 1);
        timer.addEventListener(TimerEvent.TIMER, onTimerComplete);
      }

      private function onSingleClick(evt:MouseEvent):void {
        timer.reset();
        timer.start();
      }

      /**
      * When the timer timesout and no other event is triggered in between, 
      * then its mouse single click.
      */ 
      private function onTimerComplete(evt:TimerEvent):void {
        appendText("Single Click");
      } 

	  
      private function onDoubleClick(evt:MouseEvent):void {
        timer.reset();
        appendText("Double Click");
      }

      private function appendText(str:String):void {
        textArea.text += "This is "+ str + "\n";
      }
    ]]>
  </mx:Script>

  <mx:VBox horizontalAlign="center" verticalAlign="middle">

    <mx:Button id="button" label="Click me"
        doubleClickEnabled="true"
        click="onSingleClick(event);"
        doubleClick="onDoubleClick(event);" />

    <mx:TextArea id="textArea" editable="false" height="100" width="100%"/>

  </mx:VBox>

</mx:Application>


Very simple changes.......


You can download the example source code here.

Download the example code.



blog comments powered by Disqus