Phaser JS how to stop event Propagation(firing) fr

Question

Here is the JSFiddle.

I have two events here.

1. Is game.input.onDown which does some logic (generates particles in my example)
2. Is textButton.events.onInputDown, where textButton is a Phaser.Text object instance, which does another logic.

The problem is: when I click on my textButton both event are fired 1 and 2.

The question is, how to prevent event 1 from firing when I click on the textButton?

Part of code:

...
//This event is fired on click anywhere event # 1
game.input.onDown.add(particleBurst, this);

//This is Clickable text
textButton = game.add.text(game.world.width - 5, 5, "CLICK ME", fontStyle);
textButton.anchor.setTo(1, 0);
textButton.inputEnabled = true;

//This event is fired on click on text event # 2
textButton.events.onInputDown.add(function () {
    console.log("button is Clicked");
}, this, 2);
...

Answer 1

You can add a background - transparent sprite - and use input.priorityID.

The priorityID is used to determine which game objects should get priority when input events occur. For example if you have several Sprites that overlap, by default the one at the top of the display list is given priority for input events. You can stop this from happening by controlling the priorityID value. The higher the value, the more important they are considered to the Input events.

See: http://docs.phaser.io/InputHandler.js.html#sunlight-1-line-45

// This is event #1 added to background sprite
var bg = game.add.sprite(0, 0);
bg.fixedToCamera = true;
bg.scale.setTo(game.width, game.height);
bg.inputEnabled = true;
bg.input.priorityID = 0; // lower priority
bg.events.onInputDown.add(particleBurst);

Make sure your textButton has higher priority:

textButton.input.priorityID = 1; // higher pirority

Add the clicked sprite (our background) as a first parameter to the particle function:

function particleBurst(bg, pointer) {

This way only one event should be triggered.

Check out modified fiddle: http://jsfiddle.net/g05bbL6g/3/