Proper way to handle event (bubbling)

Phaser 3
1

Hi there,

I have a use case where I want some sprites or other game objects to respond to events like pointerover to e.g. show some tooltips but also have the scene handle such events that have not been handled yet by said sprites.

For that I registered handlers on the input members of the scene and the sprites. When I now hover over the scene the scene"s handler is called as ecpected and only once even if I move the cursor around. But when I move the cursor over the sprite both handlers are called.

That itself surprised me a bit but I figured that the event is simply bubbling up from the sprite to the scene. Then I noticed that the scene handler is called before the sprite handler. Additionally I was not able to get only one handler called when moving over the sprite despite returning true/false from the handlers or calling pointer.event.prevenDefault/stopPropagation.

Online searches did suggest that those should help so I guesy I am missing something or misunderstood something.

Some posts suggested using priorityID but it seems that was only available in phaser2.

tl;dr - I would like to have the sprite handler be called first in case of an event and be able to control if the event should be handled by the scene instead.

Is that even possible or am I trying to impose an unsupported pattern on phaser? If so, what would be the recommended approach?

Thanks and Merry Christmas :slight_smile:

2

Here’s an example of what I do; source code is a tutorial from Phaser III Game Prototyping.
Events (bubblings and gurgling)

3

Sorry if I am a bit thick here, but from that code I don’t see anything about event handling hierarchies as I described in my post. There are quite a view event bindings for all buttons but nothing about fallback event handling higher up in the component tree.

What did I miss?

1 Like
4

I was looking for the same thing a couple of weeks ago. I’m guessing you are coming from a flash background? I couldn’t find anything that would do the trick, so I had to do a work around. There were two projects one using JS and Phaser, the other using typescript and PIXI. In the first one I created a single emitter in a global namespace. (myGame.emitter) in the second a singleton. In both cases I emitted and listened from a single emitter. I know it doesn’t solve the problem of bubbling, but it did work to hear my listeners where I needed.

1 Like