A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: Event problem...

  1. #1
    The Doctor Gonzo
    Join Date
    Feb 2003
    Misiones - Argentina

    Event problem...

    Hi guys... I have a simple problem but i cant figure out how to solve it...

    I have a movie, with a event attached to the STAGE (on_mouse_down).
    In addition I have a button, that has the same kind of event (on_mouse_down). The problem is that when I hit the button, both events fire (the one in the button, and the one in the stage), and I only want that the button event fire...
    I was reading some stuff about event bubbling, and the event model in AS3 but i cannot find a simple way to avoid the stage to fire the event.

    Anyone can help?
    Thanks a lot in advance!

    need a light?

  2. #2
    Total Universe Mod jAQUAN's Avatar
    Join Date
    Jul 2000
    An event actually travels through a path ancestry notifying each clip as it passes through. This can be a tough concept to wrap your head around. Lets say you have a movieclip sitting on the main stage and inside that movieclip is another movieclip acting as a button.
    The outer clip is the parent to the inner clip. The inner clip is child to the outer clip. The assumption is that an event object originates at the point of interaction. So when the child is clicked we think that event starts on the child. The truth is that it starts on the main stage.

    Like a rubber ball, the event starts on the outside, travels downward passing through all parents until it bounces off the clip you actually clicked, then returns back up the chain.
    As it passes through each clip in the hierarchy, their listener lists are checked to see if they are listening for that event. If they are, their event handlers are called. This is why when you click on your button, its parent also fires its handler for that event. So why doesn't the parent clips hander get called twice? Once on the way down and again on the way back up? Because the event has phases and we can decide which phase we want to react to.

    The path the event travels, (down, bounce, up) is split into 3 phases.
    The capture phase is the trip it takes downwards towards the clip that got clicked. Every parent of the button is notified during the capture phase but NOT the button itself.
    The target phase is the "bounce". It's the point of impact with the button. Only the button is notified during this phase so in terms of events, the button is known as the target.
    The bubbling phase is the path the event takes back up to the surface.

    A typical event assignment looks like:
    addEventListener(MouseEvent.CLICK, onButtonClick);

    but there are actually 3 more optional parameters you can pass to addEventListener(). The last two are for a different topic but the third one lets you dictate which phase of the event you like to react to. It defaults to false meaning "I only care if the event bounces off me (target phase) or passes through me on the way back up (bubble phase). If you set this to true, it will only react on the way down (capture phase)


    So, to answer your question:
    At each point during the events route you have the option to stop the event dead in its tracks. Moving from one item to the other is called propagation. What is currently happening is the event is passing through the parent during the capture phase which is ignored, hits the button during the target phase causing the buttons handler to fire, then passes back through the parent during the bubbling phase causing the parents handler to fire. So to stop the event from passing back up, simply call event.stopImmediatePropagation() in the buttons handler.

    function onMyButtonClick(event:MouseEvent):void{
      // handle the click normally.
    Last edited by jAQUAN; 11-23-2011 at 05:22 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Click Here to Expand Forum to Full Width

HTML5 Development Center