game.input.onDown event and textButton.events.onInputDown are fired both when clicking on textButton

[elennaro]

Here is the JSFiddle.

I have two events.

1. game.input.onDown which does some logic (generates particles in my example)
2. 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? And why is it happen?

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);    ...

Any help is appreciated.

How can I stop event propagation?

[piotr]

An answer to this question can be found on Stackoverflow

I'm pasting here the original answer for future reference:

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/