How to separate Button Click and Fire Click?

Question

I have a button that starts the game, it initializes the game when you click it

startButton.addEventListener(MouseEvent.CLICK, onStartButtonClick);

I also have a firing thing, it's supposed to shoot AFTER you start the game by clicking the start button and THEN shoot when you click.

stage.addEventListener(MouseEvent.CLICK, fire);

However, it fires right when I click the start button. How can I fix this?

This is my code.

public function Game()
    {
        startButton.addEventListener(MouseEvent.CLICK, onStartButtonClick);
    }

    function onStartButtonClick(event: MouseEvent): void
    {
        addEventListener(Event.ENTER_FRAME, loop);
        stage.addEventListener(MouseEvent.CLICK, fire);

        function fire(m: Event)
        {
            //shoot bullet
        }
    }

Answer 1

It's caused by event bubbling. Just modify your onStartButtonClick function to:

function onStartButtonClick(event: MouseEvent): void
{
    event.stopPropagation();
    addEventListener(Event.ENTER_FRAME, loop);
    stage.addEventListener(MouseEvent.CLICK, fire);

For more information about event bubbling CHECK HERE