Using 2 distinct mouse events in flex

Question

Am working on a flex project

I am looking to provide some UI functionality using the mouse- I have two distinct UI events to be achieved via mouse a) change value b) delete object

I don't seem to have sufficient mouseclick events for both. I am avoiding using the right click as it has some default options(whose signing off will affect the whole project- not just this). I have mouse click used for change value- how do I use the doubleclick as the single-click events seems to get invoked prior?

Any thoughts?

Answer 1

        private var doubleClickOccurred:Boolean = false;
        private var timer:Timer = new Timer(100, 1);

        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            myLabel.addEventListener(MouseEvent.CLICK, checkSingleOrDoubleClick);
            myLabel.addEventListener(MouseEvent.DOUBLE_CLICK, checkSingleOrDoubleClick);

            timer.addEventListener(TimerEvent.TIMER_COMPLETE, handleClick);
        }

        private function checkSingleOrDoubleClick(event:MouseEvent):void
        {
            if(event.target == myLabel && event.type == MouseEvent.DOUBLE_CLICK)
            {
                // set the flag and let the timer complete event
                                    // take care of the click handling
                doubleClickOccurred = true;
                trace(" double clicked");

            }
            else if( event.type == MouseEvent.CLICK)
            {
                // start timer to wait till the double click event 
                                    // gets called
                timer.start();
                trace("Starting timer");
            }

        }

        private function handleClick(event:Event):void
        {

            if(doubleClickOccurred)
            {
                // handle double click event
                trace("Yes");
            }
            else
            {

                // handle single click
                trace("No");
            }
            // reset flag for capturing future events
            doubleClickOccurred = false;
        }

    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>


<s:Label id="myLabel" text="Click Me" doubleClickEnabled="true" />  

Output: 1) If a there is a single mouse click on the Label, the Single click login i.e trace("No") is invoked

2) In case of double click on the Label, the trace("yes") is invoked.

I hope this piece of code answers your question about handling single and double click on Flex components.

Answer 2

Can't say too much without knowing what you're editing, what the values are, etc.

A common idiom is to show an "X" icon, say, on the edge of a selected item, with clicks only on that icon triggering delete.