javascript - Phaser JS how to stop event Propagation(firing) from textButton.events.onInputDown event to game.input.onDown event

admin管理员组

文章数量:1312795

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

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

• javascript
• events
• html5-canvas
• phaser-framework

Share Improve this question Follow edited Mar 1, 2015 at 18:01 MamaWalter 2,11311 gold badge1919 silver badges2727 bronze badges asked Dec 25, 2014 at 21:45 Alexander ArtAlexander Art 1,58922 gold badges2424 silver badges5151 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9 +50

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/g05bbL6g/3/

本文标签：