2 Replies Latest reply on Jun 6, 2010 10:48 PM by UbuntuPenguin

    Top groups blocks bottom group listeners.

    UbuntuPenguin Level 4

      Hello Everyone ,

        I have some groups on top of each other , what I would like to do is have the bottom group be able to use MouseEvents. Unfortunately , I have found that if one group is under another , the bottom group doesn't get those events.  Below is pseudo-code of an example.

       

      <Group id="parentGroup">

         <Group x="0" y="0" width="100%" height="100%"  id="bottomGroup" mouseDown="{bottomGroupMouseDownHandler(event))}" />

         <Group x="0" y="0"  width="100%" height="100%" id= "topGroup" mouseDow="{topGroupMouseDownHandler(event)}" />

       

         function bottomGroupMouseDownHandler( event:Event ):void

         {

            ///I won't fire

         }

       

         function topGroupMouseDownHandler( event:Event ):void

         {

            ///I WILL fire

         }

       

        Does anyone know how I can make the bottom group catch MouseEvents , or am I solving a problem that doesn't really need to be solved , and the solution lies in the design. Points will be awarded to helpful / correct answers

       

      Sincerely,

        Ubu

        • 1. Re: Top groups blocks bottom group listeners.
          Shongrunden Adobe Employee

          You might be looking for mouseEnabledWhereTransparent, for example:

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark">
             
              <s:Group width="100%" height="100%" click="trace('grey')">
                  <s:Rect width="100%" height="100%"><s:fill><s:SolidColor color="0xe3e3e3" /></s:fill></s:Rect>
              </s:Group>
             
              <s:Group width="100%" height="100%" click="trace('red')" mouseEnabledWhereTransparent="false">
                  <s:Rect width="50%" height="50%"><s:fill><s:SolidColor color="red" /></s:fill></s:Rect>
              </s:Group>
             
              <s:Group width="100%" height="100%" click="trace('blue')" mouseEnabledWhereTransparent="false">
                  <s:Rect width="25%" height="25%"><s:fill><s:SolidColor color="blue" /></s:fill></s:Rect>
              </s:Group>
             
          </s:Application>
          • 2. Re: Top groups blocks bottom group listeners.
            UbuntuPenguin Level 4

            Thanks Shongruden,

              I hacked my way around it by nesting the containers.  That way the mouse event bubbles , but I can't wait to test out what you recommended.