Question

What is the code to check if mouse is clicked inside a child element when the click event is for parent element. I need to differentiate to perform certain tasks only if the click is inside the child element. What kind of propagation happens in flex? I am bit new to this.

I have a video player with video display and video controls bar. I register click event for video player which occupies the full screen. On click the controls bar should toggle (as programmed) which it does, but on clicking any element in the control bar the entire bar dissapears.

<!-- Player Container -->
<s:BorderContainer width="100%" height="100%"
           backgroundAlpha="0"
           borderVisible="false">

  <s:VideoPlayer id="vid_player"
          width="100%" height="100%"
          verticalCenter="0"
          horizontalCenter="0"
          skinClass="Skins.VideoPlayerSkin"
          maintainProjectionCenter="true"
          mouseDown="hideControls(event)"
          autoPlay="true" source="{current_video.getSource()}"/>            
</s:BorderContainer><!-- Player Container -->

public function hideControls(event:Event):void {
  hidePlaylist();
  toggleElem(header);
  toggleElem(sec_drop_container);
  toggleVideoPlayer();
}

public function toggleVideoPlayer() {
    var controls:Object = vid_player.videoDisplay.parent.getChildAt(1);
    if(controls.visible)
        controls.visible=false;
    else
        controls.visible  = true;
}

Answer 1

Probably the simplest way is:

private function mouseHandler(event:MouseEvent/*was e:MouseEvent*/):void {
    whateverObject.hitTestPoint(event.stageX, event.stageY, false); // use shape flag is 3rd argument
}