5 Replies Latest reply on Sep 20, 2012 12:32 PM by gere34

    Mouse Down ,Mouse Click conflict

    UbuntuPenguin Level 4

      Dear Flexmasters ,

        I have a view component that I would like to be draggable when the mouse is held down ,  and dispatch an event when clicked ( single-click ).  However , when I go to drag and the mouse is released , a click event is dispatched.  Is there a way I can prevent the click event from being fired during a drag and drop operation ?  As always points WILL be awarded.

      Here is the code if you would like to see it.

                  public function init():void
                  {
                       this.addEventListener(MouseEvent.MOUSE_DOWN , handleStartDrag );
                      this.addEventListener(MouseEvent.MOUSE_UP , handleStopDrag );
                      this.addEventListener(MouseEvent.CLICK , layerClick );
                  }
                 
                  private function handleStartDrag(event:MouseEvent):void
                  {
                       event.preventDefault();
                      var target:UIComponent = UIComponent(event.currentTarget);
                      target.startDrag(false);
                  }
                 
                  private function handleStopDrag(event:MouseEvent):void
                  {
                      event.preventDefault();
                      var target:UIComponent = UIComponent(event.currentTarget);
                      target.stopDrag();
                  }
                 
                  private function layerClick(event:MouseEvent):void
                  {
                      if(event.type == MouseEvent.CLICK )
                      {
                          var uiEvent:UIEVENT = new UIEVENT(UIEVENT.LAYERSELECTED);
                          uiEvent.layer = layer;
                          dispatchEvent( uiEvent );
                      }
                  }

        • 1. Re: Mouse Down ,Mouse Click conflict
          Flex harUI Adobe Employee

          If you mouseUp on the same object you mouseDown on, you get a click.  I'd probably just add a flag that the drop just finished and ignore or eat the click.

           

          You could slip another object under the mouse so the up is on a different object.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: Mouse Down ,Mouse Click conflict
            magarik

            you could:

            assign the mouse_up listener to stage, have your items in an array, so you could reach them without e.currentTarget,

            and use some method of delay, so as to make the difference between down-up and click. here i use TweenMax for this, could be just a timer.

             

            var current:int;

             

            protected function click(e:MouseEvent):void {

            TweenMax.killDelayedCallsTo(rDown);

            }

             

            protected function down(e:MouseEvent):void {

            TweenMax.delayedCall(.1, rDown, [e.currentTarget]);

            }

             

             

            protected function rDown(e:Object):void {

            current = e.id;

            stage.addEventListener(MouseEvent.MOUSE_UP, sort, false, 10, true);

            containerOfClips.mouseChildren = false;

            e.startDrag(f);

            containerOfClips.setChildIndex(Thumb(e), containerOfClips.numChildren - 1);

            }

             

             

             

             

            protected function sort(e:MouseEvent):void {

            TweenMax.killDelayedCallsTo(rDown);

            items[current].stopDrag();

            stage.removeEventListener(MouseEvent.MOUSE_UP, sort, false);

            [whatever]

            containerOfClips.mouseChildren = true;

            }

            • 3. Re: Mouse Down ,Mouse Click conflict
              UbuntuPenguin Level 4

              Thanks magarik , but I got the solution back in November of 2009.  Your solution seems a bit roundabout ?

              • 4. Re: Mouse Down ,Mouse Click conflict
                magarik Level 1

                might be

                i've stumbled across the post looking for an answer myself, and replied what i had in mind at the moment.

                since i am currently developing something that uses that, i'd love to hear of a more straightforward way.

                thanks

                • 5. Re: Mouse Down ,Mouse Click conflict
                  gere34

                  I overrided the MouseEvent and Group classes to differenciate the MouseEvent.CLICK and MouseEvent.MOUSE_DOWN -> MouseEvent.MOUSE_UP

                  utils.RealMouseEvent.as

                  package utils
                  {
                       import flash.events.MouseEvent;
                       import flash.events.TimerEvent;
                       import flash.geom.Point;
                       import flash.utils.Timer;
                       
                       import settings.Settings;
                       
                       import spark.components.Group;
                       
                       [Event(name="realClick", type="utils.RealMouseEvent")]
                       [Event(name="realMouseUp", type="utils.RealMouseEvent")]
                       [Event(name="realMouseDown", type="utils.RealMouseEvent")]
                       public class RealMouseEventsGroup extends Group
                       {
                            public function RealMouseEventsGroup()
                            {
                                 super();
                                 _isTimeOut = false;
                                 addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler,false,1);
                                 addEventListener(MouseEvent.CLICK,mouseClickHandler,false,1);
                  
                            }
                            
                            public var stopPropagation:Boolean = false;
                            
                            private var _timer:Timer = new Timer(parseInt(Settings.getSetting("clickDelay")),1);
                            private var _mouseMoveTolerance:Number = parseInt(Settings.getSetting("mouseMoveTolerance"));
                            private var _isTimeOut:Boolean;
                            private var _isMoved:Boolean;
                            private var _event:MouseEvent;
                            private var _lastMouseDownPt:Point;
                            
                            private function mouseDownHandler(event:MouseEvent):void{
                                 _lastMouseDownPt = new Point(mouseX,mouseY);
                                 _isTimeOut = false;
                                 _isMoved = false;
                                 _event = event;
                                 addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler,false,1);
                                 addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler,false,1);
                                 _timer.addEventListener(TimerEvent.TIMER_COMPLETE,clickTimeOut,false,1);
                                 _timer.reset();
                                 _timer.start();
                                 if(stopPropagation)
                                      event.stopPropagation();
                            }
                            private function mouseUpHandler(event:MouseEvent):void{
                                 if(_isTimeOut || _isMoved)
                                      dispatchEvent(new RealMouseEvent(RealMouseEvent.REAL_MOUSE_UP,event));
                                 removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
                                 _timer.stop();
                                 if(stopPropagation)
                                      event.stopPropagation();
                            }
                            private function mouseClickHandler(event:MouseEvent):void{
                                 if(!_isTimeOut && !_isMoved)
                                      dispatchEvent(new RealMouseEvent(RealMouseEvent.REAL_CLICK,event));               
                                 _timer.stop();
                                 if(stopPropagation)
                                      event.stopPropagation();
                            }
                            private function mouseMoveHandler(event:MouseEvent):void{
                                 var pt:Point = new Point(mouseX,mouseY);
                                 if(Point.distance(_lastMouseDownPt,pt) > _mouseMoveTolerance){
                                      _timer.stop();
                                      dispatchEvent(new RealMouseEvent(RealMouseEvent.REAL_MOUSE_DOWN,_event));
                                      removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
                                      _isMoved = true;
                                 }
                            }
                            private function clickTimeOut(event:TimerEvent):void{
                                 _isTimeOut = true;
                                 _timer.removeEventListener(TimerEvent.TIMER_COMPLETE,clickTimeOut);
                                 removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
                                 dispatchEvent(new RealMouseEvent(RealMouseEvent.REAL_MOUSE_DOWN,_event));
                            }
                       }
                  }

                   

                  utils.RealMouseEventsGroup.as

                  package utils
                  {
                       import flash.display.InteractiveObject;
                       import flash.events.MouseEvent;
                       
                       public class RealMouseEvent extends MouseEvent
                       {
                            public static const REAL_CLICK:String = "realClick";
                            public static const REAL_MOUSE_DOWN:String = "realMouseDown";
                            public static const REAL_MOUSE_UP:String = "realMouseUp";
                            
                            public function RealMouseEvent(type:String, src:MouseEvent, bubbles:Boolean=true, cancelable:Boolean=false)
                            {
                                 super(type, bubbles, cancelable, src.localX, src.localY, src.relatedObject, src.ctrlKey, src.altKey, src.shiftKey, src.buttonDown, src.delta);
                            }
                       }
                  }

                   


                  exemple of use :

                  <utils:RealMouseEventsGroup id="myGroup"

                                                          realClick="myGroup_realClickHandler(event)"

                                                          realMouseDown="myGroup_realMouseDownHandler(event)"

                                                          realMouseUp="myGroup_realMouseUpHandler(event)"/>