6 Replies Latest reply on Jan 30, 2012 8:05 AM by Flex harUI

    Event Bubbling


      Hi all,

      I have a MXML component that I need to add a MOUSEVENT.ROLL_OVER/OUT event to


      the issue I have is, my components super class is a HBox, and the event seem to be triggered not on roll over/out of the HBOX but of the children of the HBox


      In my case, the event makes something (icon) larger for its associated component when hovered over, and then smaller


      this is correct


      but as i move between each child it trigger the roll_out event making it smaller again


      what i need is, when over the HBox and not children (unless the children have their own roll_over/out events - some do) to trigger to event roll_over event


      does this make sense?



        • 1. Re: Event Bubbling
          _spoboyle Level 4

          you could try setting mouseChildren = false for the HBox this will stop any children firing MouseEvents

          1 person found this helpful
          • 2. Re: Event Bubbling
            DrogoNevets Level 1

            but what about those children i do want to fire events?


            basically, this Hbox is defined thus


            <?xml version="1.0" encoding="utf-8"?>

            <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"



                     xmlns:esri = "http://www.esri.com/2008/ags"






                <mx:HBox verticalAlign="middle" height="40">

                    <mx:Image id="imgTrash" source="{ICON_URL + 'w_close.png'}" height="{icon_size}" width="{icon_size}" />

                    <mx:Text id="txtShaftName" text="{shaftName}" width="80" height="{icon_size}" />

                    <mx:Image id="imgProperty" width="16" height="16" source="{ICON_URL + 'tag_purple.png'}" toolTip="Select Property" />

                    <mx:Image id="imgOpenSpace" width="16" height="16" source="{ICON_URL + 'tag_green.png'}" toolTip="Select Open Space" />

                    <mx:Image id="ctnPriority" width="{icon_size}" height="{icon_size}" source="{ICON_URL + priority}" />



                <mx:VBox id="shaftHolder"





            in the VBox label "shaftHolder" will be any number of custom components which will have mouse events registered to them, but the images and txt boxes all fire them rather than the parent HBox (does this make sense?)

            • 3. Re: Event Bubbling
              _spoboyle Level 4

              If yuou require some MouseEvents for some of the children then my proposed solution won't work


              You could  include a check in your rollOverHandler to check the object generating the event




              private function rollOverHandler(e:MouseEvent):void


                   if (e.target == shaftHolder)





              • 4. Re: Event Bubbling
                Flex harUI Adobe Employee

                Make sure the HBox has a backgroundColor (and backgroundAlpha if you need to see through it)


                Alex Harui

                Flex SDK Developer

                Adobe Systems Inc.<http://www.adobe.com/>

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

                • 5. Re: Event Bubbling
                  DrogoNevets Level 1

                  Flex harUI

                  that then stops the children firing the event


                  maybe i am not epxlaining well enough


                  when mouse goes over any part of the HBox the event should be triggered.


                  but it should not be triggered again when hovering over the children, so should only be triggered once, and once only


                  at present event is triggered when


                  mouse goes in/out of HBox

                  mouse goes in/out of children


                  so taking there are 5 elements in said HBox by default


                  just moving mouse left to right across the box will trigeer the event 6 times

                  • 6. Re: Event Bubbling
                    Flex harUI Adobe Employee

                    You will have to examine the event.target and only respond if the target is the HBox.


                    Alex Harui

                    Flex SDK Developer

                    Adobe Systems Inc.<http://www.adobe.com/>

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