11 Replies Latest reply on Jul 23, 2011 2:22 PM by wanderingWriter

    actual target for MouseEvent.CLICK - spark skins

    wanderingWriter

      Hello,

       

      I have a question about Event Listeners and targeting events.

       

      In my AIR app for mobile I need to click / tap on a number of s:Image objects.

      At first I added to each of them an Event Listener linked to an Event Handler. Then, trying to optimize my code, I moved the Event Listener to the container object as suggested in various optimization resources I found online.

       

      The problem was that the event.target property was not the clicked image, but a s:Group. I eventually figured out that the s:Group was part of the skin of the s:Image, and I fixed the problem by using the target.owner property, but this behavior really created a lot of confusion. I couldn’t find anything about it on the Adobe development resources, as they just insist on (and explain quite well) the difference between the target and currentTarget properties.

       

      Below you can find a simple representation of my workaround, but I was wondering if:

      1) This was actually caused by some mistake I made, and if it could be more easily avoided;

      2) There is a better or more efficient workaround than the one I came up with;

      3) The topic is discussed somewhere in the documentation.

       

      Thanks a lot!

      import spark.components.Image;
      
      private var image1:Image;
      
      private function initComponent():void
      {
           image1 = new Image();
           image1.source = "assets/aaa.png";
           image1.id = "thisIsTheImage";
           addElement(image1);
                          
           addEventListener(MouseEvent.CLICK, clickHandler);          // 1
      //   image1.addEventListener(MouseEvent.CLICK, clickHandler);     // 2 - the old one
      }
                     
      private function clickHandler(event:MouseEvent):void
      {
           trace("event.currentTarget \t\t\t" +              event.currentTarget);
           trace("event.target \t\t\t\t" +                   event.target);
           trace("event.target.owner.owner \t\t" +           event.target.owner.owner);
           trace("image1.imageDisplay.displayObject \t" +    image1.imageDisplay.displayObject);
           
           if(event.target.owner.owner is Image){
                // do something
           }
      }
      
      console:
      
      event.currentTarget                     TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33
      event.target                            TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33.SkinnableContainerSkin35.contentGroup.thisIsTheImage.ImageSkin43.Group44
      event.target.owner.owner                TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33.SkinnableContainerSkin35.contentGroup.thisIsTheImage
      image1.imageDisplay.displayObject       TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33.SkinnableContainerSkin35.contentGroup.thisIsTheImage.ImageSkin43.Group44