Here is the JSFiddle.
I have two events here.
game.input.onDown
which does some logic (generates particles in my example)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);
...
stopPropagation() Event Method The stopPropagation() method prevents propagation of the same event from being called. Propagation means bubbling up to parent elements or capturing down to child elements.
To stop an event from further propagation in the capturing and bubbling phases, you call the Event. stopPropation() method in the event handler. Note that the event. stopPropagation() method doesn't stop any default behaviors of the element e.g., link click, checkbox checked.
The event. stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
Phaser 3 is the new version of the Phaser Game Framework series. It includes a brand-new custom WebGL renderer designed specifically for the needs of modern 2D games. Phaser uses both a Canvas and WebGL renderer internally and automatically switch between them based on browser support.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With