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

    Event Bubbling

    DrogoNevets

      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?

       

      TIA!

        • 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:s="library://ns.adobe.com/flex/spark"

                     xmlns:mx="library://ns.adobe.com/flex/mx"

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

                     borderStyle="solid"

                     creationComplete="init(event)">

             

                      ...

             

                <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:HBox>

             

                <mx:VBox id="shaftHolder"

                         horizontalAlign="right">

                </mx:VBox>

            </mx:VBox>

             

            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

               

              e.g.

               

              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