5 Replies Latest reply on Apr 19, 2011 12:56 PM by ipauland

    Event Propagation again. Sorry

    pk. Rzhevskij

      Hi guys, I vave a pretty simple app to test how the propagation works.I do not undestand, why the propagation on the stage 3 (bubbling) works in the oppsit way than it should work.

      Here is my code:

       

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

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

                  xmlns:view="view.*" initialize="init()">

                 

      <mx:Script>

      <![CDATA[

           import mx.controls.Label;

           import mx.events.FlexEvent;

           import mx.controls.Button;

           import mx.controls.Alert;

       

           import flash.events.TextEvent;

       

          

           private function init():void {

                this.addEventListener(MouseEvent.CLICK, handleTestEvent);

                vBox2.addEventListener(MouseEvent.CLICK, handleTestEvent2);

                vBox1.addEventListener(MouseEvent.CLICK, handleTestEvent1);

           }

       

       

           private function handleTestEvent2(event:MouseEvent):void {

                Alert.show("This is VBox2  " + event.eventPhase );

           }

       

       

           private function handleTestEvent1(event:MouseEvent):void {

                Alert.show("This is VBox1  " + event.eventPhase);

           }

       

       

           private function handleTestEvent(event:MouseEvent):void {

                Alert.show("This is Application  " + event.eventPhase);

           }

       

       

      ]]>

       

           </mx:Script>

       

                <mx:VBox id="vBox2">

                     <mx:VBox id="vBox1">

                          <mx:Button id="testButton" label="Click Me" />

                     </mx:VBox>

                </mx:VBox>

       

           </mx:Application>

       

      So, when I run this application, the first popup I see is: This is Application 3. Then: This is VBox2 3  and the last one: This is VBox1 3. But as I understud the order should be: This is VBox1 3,  This is VBox2 3,  This is Application 3.

      Could some body explain what's wrong?

       

      Thanks.

        • 1. Re: Event Propagation again. Sorry
          CleanCoder Level 2

          If I'm understanding you correctly, I believe it has to do with the order you are adding your eventListeners in.

           

          try this:

           

          private function init():void {

               vBox1.addEventListener(MouseEvent.CLICK, handleTestEvent1);

               vBox2.addEventListener(MouseEvent.CLICK, handleTestEvent2);

               this.addEventListener(MouseEvent.CLICK, handleTestEvent);

          }

          • 2. Re: Event Propagation again. Sorry
            pk. Rzhevskij Level 1

            Hi CleanCoder. Thank you for your answer.

            This solution din't help.

             

            Any other sugesstions?

            • 3. Re: Event Propagation again. Sorry
              UbuntuPenguin Level 4

              I wrote a test script and got the behaviour expected.  You may be getting confused by the order of the Alert boxes.  The Alert boxes are added in reverse order, meaning the LAST alert box to be added is the FIRST one you see.

              1 person found this helpful
              • 4. Re: Event Propagation again. Sorry
                pk. Rzhevskij Level 1

                Thank you UbuntuPenguin.

                 

                Changed the example to use a textarea instead of alert popuos, and got expected behaviour:

                This is VBox1

                This is VBox2

                This is Application

                 

                Thnks a lot.

                 

                About Alert popups - could you please explaint their behaviour more detailed or post a link to read.

                • 5. Re: Event Propagation again. Sorry
                  ipauland Level 1

                  The Alert boxes sit on the top of the display.

                   

                  When you get the first alert, it appears over the content.

                  When the second happens it sits over the first alert.
                  Then the third happens and sits over the second.

                   

                  So, when you see the third alert, it looks like there is only one box, but there are two underneath - hidden.

                  You dismiss the third alert and see the second.

                  You dismiss the second and see the first.

                   

                  It looks like the order is reversed, but in fact the order is correct and they have just popped up over each other. It feels that dismissing the third alert causes the second alert to popup, but it doesn't - it was there all along.

                   

                  Alert isn't synchronous.