5 Replies Latest reply on Oct 12, 2009 4:30 AM by kkc_mca

    How to override click event handling of a component?

    jake_flex Level 2

      Let's start with a code. I have a simple HBox container that holds a Button and a TextInput. Note that the syntax might not be valid mxml, since I'm writing it directly on the post. The purpose is just to 'visualize' the question.

      <!-- myBox.mxml-->
      <mx:HBox>
           <mx:Button id="b1"/>
           <mx:TextInbut />
      </mx:HBox>
      
      <!-- Main app that uses myBox component -->
      <!-- code omitted ... -->
      
      <ns1:myBox id="box" click="myEventHandler(event)"/>
      
      <!-- code omitted. Next is script block -->
      
      private function myEventHandler(event:Event) : void
      {
           // Do something
      }
      

      If I use the code above, the event handler is executed when I click the Button or the TextInput inside the box. How could I override the functionality so that the event handler function is only associated with the button?

       

      I tried with a function like

      function set click(eventHandler:Function) : void
      {
           b1.addEventListener(MouseEvent.CLICK, eventHandler)
      }
      

      but that didn't work. I don't think it even gets executed.

       

      I also tried to use the keyword override with that, but the compiler gives me error. I also tried to override clickHandler(event) function, but that gives the same error ( Method marker with override must override another method )

       

      Any suggestions?

       

      Thanks.

        • 1. Re: How to override click event handling of a component?
          Gregory Lafrance Level 6

          The easiest way to do this is to check to see if the event object currentTarget "is" a Button:

           

          private function myEventHandler(event:Event) : void
          {
              if(event.currentTarget is Button){

                  // do something

              }
          }

           

          If this post answers your question or helps, please mark it as such.

           

          1 person found this helpful
          • 2. Re: How to override click event handling of a component?
            jake_flex Level 2

            Thanks for the reply Greg.

             

            That does the job, but not as I would like. Using your method, the logic is in the user of the component not in the component itself. I don't want the container that holds by HBox component to know the details of the internals.

            • 3. Re: How to override click event handling of a component?
              Flex harUI Adobe Employee

              IMHO, best practice is to dispatch a custom event when the button is clicked.  The scrollbar buttons dispatch Scroll events for example.

               

              If you want to block, put a click handler on HBox

               

              <mx:HBox click="if (event.target != b1) event.stopImmediatePropagation()" >

                   <mx:Button id="b1"/>

                   <mx:TextInbut />

              </mx:HBox>

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

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

              1 person found this helpful
              • 4. Re: How to override click event handling of a component?
                jake_flex Level 2

                Thanks for the reply Alex.

                 

                Both of your suggestion are valuable, I went for blocking the events from other that the button for now. I'll think about the whole overall custom events for my app, and change the functionality if see proper.

                 

                I'll keep the discussion still open, since I didn't get direct answer to my question on overriding. Can this kind of 'advanced' programming done with Flex/mxml or is it required to write the whole custom component in action script?

                • 5. Re: How to override click event handling of a component?
                  kkc_mca Level 2

                  write down the click handler for the button in the myBox itself implement the listener function or

                   

                   

                  <!-- myBox.mxml-->
                  <mx:HBox>
                       <mx:Button id="b1" click="clickHandler(event)"/>
                       <mx:TextInbut />
                  </mx:HBox>

                   

                   

                  while init, in the script you can assign a click handler

                   

                   

                  box.b1.addEventListener(MouseEvent.CLICK, eventHandler);
                  <ns1:myBox id="box" click="myEventHandler(event)"/> // no need to add click event, if added stop the propagation

                   

                   

                   

                   

                  function set click(eventHandler:Function) : void
                  {
                       event.stopImmediatePropagation(); // stops the event propagation
                  }

                   

                   

                  I hope this post answers your question, Please mark it as such .