0 Replies Latest reply on Oct 15, 2009 2:45 PM by michel_page38@yahoo.fr

    Event processing order

    michel_page38@yahoo.fr

      Hello,

      I am a Flex newbie. I have the following Flex 4 app application containing 3 nested colored canvas:

       

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


          <mx:Script>
              <![CDATA[
                  import mx.controls.Alert;

                 
                  function info(e: MouseEvent): void {
                      Alert.show('I am ' + e.currentTarget.id)
                  }
              ]]>
          </mx:Script>

       

          <mx:Canvas id = "red" x="0" y="0" width="200" height="200" backgroundColor="#FF0000" click="info(event)">
              <mx:Canvas id = "green" x="50" y="50" width="100" height="100" backgroundColor="#00FF00"  click="info(event)">
                  <mx:Canvas id = "blue" x="25" y="25" width="50" height="50" backgroundColor="#0000FF"  click="info(event)" />
              </mx:Canvas>
          </mx:Canvas>

      </mx:Application>

       

      Since the blue canvas is the foremost one, it is counterintuitive to me that when clicking on it, we get :

      1. I am red

      2. I am green

      3. I am blue

       

       

      In order to get what I expected, i.e.

      1. I am blue

      2. I am green

      3. I am red

       

      from what I read, I should write add an event handler with use_capture set to true:

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();">
          <mx:Script>
              <![CDATA[
                  import mx.controls.Alert;
                 
                  function initApp(): void {
                      red.addEventListener(MouseEvent.CLICK, info, true);
                      green.addEventListener(MouseEvent.CLICK, info, true);
                      blue.addEventListener(MouseEvent.CLICK, info, true);               
                  }
                 
                  function info(e: MouseEvent): void {
                      Alert.show('I am ' + e.currentTarget.id)
                  }
              ]]>
          </mx:Script>
         
          <mx:Canvas id = "red" x="0" y="0" width="200" height="200" backgroundColor="#FF0000">
              <mx:Canvas id = "green" x="50" y="50" width="100" height="100" backgroundColor="#00FF00">
                  <mx:Canvas id = "blue" x="25" y="25" width="50" height="50" backgroundColor="#0000FF" />
              </mx:Canvas>
          </mx:Canvas>

      </mx:Application>

       

      Isn't there a simpler way of doing this ?