6 Replies Latest reply on Apr 4, 2011 7:02 AM by learner_doug

    Mouse Click event and UIComponent

    rashare

      I need to trigger a click event on the rectangle.

       

      But with my code below the click event triggers even when clicked outside rectangle, Can anybody please expalin this behavior and the solution so that event triggers only when clicked on the rectangle.

       

      (Tried setting mouseChildren to false, but invain.Still triggers outside the rectangle)

       

      public function drawNewRectabgle() : void{
                  var uiComponent : UIComponent = new UIComponent();

                  //uiComponent.mouseChildren = false;
                  uiComponent.graphics.lineStyle(1,0xFF0000);
                  uiComponent.graphics.drawRect(0,0,70,20);
                  uiComponent.width = 70;
                  uiComponent.height = 20;
                  var textField : TextField = new TextField();
                  textField.x = 10;
                  textField.y = 5;
                  textField.text = addPerson.txtInput.text;
                  uiComponent.addChild(textField);
                  uiComponent.addEventListener(MouseEvent.CLICK,clickFunction);
                  addChild(uiComponent);       
         }

       

      Thankyou.

        • 1. Re: Mouse Click event and UIComponent
          learner_doug Level 1

          This is a bit of wild guessing, so read with a grain of salt (50% chance this will help).

           

          1.  If this is a Flex 4 application, try changing the addChild() to addElement().  Reason:  addChild doesn't seem to work for me.

          2.  Sounds like your event is "bubbling" up from the target "up" to the parent component.  Might try:

           

          object.stopPropagation()

          or

          object.stopImmediatePropagation()

           

           

          Good luck - sorry for the lack of certainty.

          • 2. Re: Mouse Click event and UIComponent
            rashare Level 1

            Unfortunately using :

             

            object.stopPropogation() or object.stopImmediatePropagation() didn't work.

             

            I added Alert.show(object.currentTarget.valueOf()) in click event function. The value it alerts is same whether clicked on rectangle or outside rectangle.

            • 3. Re: Mouse Click event and UIComponent
              CleanCoder

              At first glance... Your rectangle has no fill, so the only part that would be clickable would be the stroke. Try adding a fill with its "alpha" property set to 0. Also, you can use the event from the clickHandler to determine where the event is originating from (event.target).

              • 4. Re: Mouse Click event and UIComponent
                rashare Level 1

                I used the event.target and got to know, textField was generating event(Phase 3), so resized the text field to fit the rectangle and now all is fine.

                 

                But I have question, textField is added as child to UIComponent and event listener is not added to textField but for the UIComponent. Why is textField dispatching click event?

                 

                Thank you.

                • 5. Re: Mouse Click event and UIComponent
                  CleanCoder Level 2

                  The TextField  is still catching the "click" events because it is essentially sitting on top of your UIComponent. Instead of resizing the TextField, I would suggest adding a call to graphics.beginFill(0xFFFFFF, 0) before you draw your rectangle and a call to graphics.endFill() right after you finish drawing your rectangle. This should make your entire UIComponent clickable based on the size of your rectangle, not the size of the TextField. Set mouseEnabled = false on the TextField and you should be good.

                  • 6. Re: Mouse Click event and UIComponent
                    learner_doug Level 1

                    Maybe bubbling?