How to handle events in PIXI?

[Sebi]

My problem is, that I have handlers that I got to apply to the stage itself and handlers that have to be applied to sprites.

Now if i click the sprite, the stage click is also fired.

 

How can I avoid this?

 

// edit

Okay I have just tested something.

I've created a transparent texture and used it for a sprite, set the width and height of my stage, then applied the click handler to that sprite instead of my stage. This does work as intended. Can I achieve the same goal without using an extra sprite?

 

// edit 2

here an example: http://www.mokgames.com/pixi/events/

If you click the text on the left stage, the stage click handler also fires,

if you click the text on the right stage, the stage click handler does not fire ( <- thats the one i want ) 

[cubiq]

haven't tried myself but data.originalEvent.stopPropagation(); might work. You'd place that in the sprite event.

[Sebi]

Here is an example of what I did http://www.mokgames.com/pixi/events/

The stage on the right side is using the sprite while the left stage has them applied directly.

 

The stage event handler is called first, so I'm not sure if data.originalEvent.stopPropagation(); would work.

[cubiq]

actually I had a lot of troubles with events hooked to the stage, especially with touch events.

 

Anyway it should work if you put the stage event listener at the end and then stop propagation. That would work on DOM, but maybe pixi just checks for collisions and do not respect event bubbling. Give it a shot anyway.

[Eugenius]

Hi! I came across the same issue in my code. Have you guys found a solution to this? Thanks . 

Also there was a related topic in this github page that they are discussing about the need of event bubbling. 

[xerver]

So events do not bubble up the scene graph right now. However there is a review-in-progress for an implementation of this:

 

https://github.com/GoodBoyDigital/pixi.js/pull/665

 

That would fix issues like #625 that you linked.

[Eugenius]

So events do not bubble up the scene graph right now. However there is a review-in-progress for an implementation of this:

 

https://github.com/GoodBoyDigital/pixi.js/pull/665

 

That would fix issues like #625 that you linked.

 

Thank you for the link and the event bubbling is working quite nice, couldn't find any issue yet. Are you also planning to implement event capturing (bottom to top) with Event Target as well? Because with the current InteractionManager, I cannot stop its propagation as OP's issue without workaround nor I can find related code that does the job. 

[xerver]

Thank you for the link and the event bubbling is working quite nice, couldn't find any issue yet. Are you also planning to implement event capturing (bottom to top) with Event Target as well? Because with the current InteractionManager, I cannot stop its propagation as OP's issue without workaround nor I can find related code that does the job. 

 

Probably not going to implement a separate capturing/bubbling phase but hopefully bubbling will handle most of the use cases. We understand the interaction manager is a sore point in pixi right now and definitely needs a rewrite.

[Eugenius]

Probably not going to implement a separate capturing/bubbling phase but hopefully bubbling will handle most of the use cases. We understand the interaction manager is a sore point in pixi right now and definitely needs a rewrite.

 

Thanks for the quick reply! Can't wait for fully implemented event feature, and it actually meets most of my use cases. Just a quick question about what you meant by 'the scene graph', you mean it's not bubbling up all the layers on stage? 

 

What I've tested was this simple thing.

 

 

yellow - Stage

red - Sprite1

blue - Sprite2

 

PIXI.EventTarget.mixin(PIXI.DisplayObjectContainer.prototype);

 

sprite2.click = function (e) {

    sprite2.dispatchEvent('click', e);

}

 

stage.addEventListener('click', function(e){console.log('stage clicked');});

sprite1.addEventListener('click', function(e){console.log('sprite1 clicked');});

sprite2.addEventListener('click', function(e){console.log('sprite2 clicked');});

 

 

then when i click on the blue it drops (or not implemented) the sprite1 (red) but Stage listens the event.

 

was it what you meant?

 

 

And also if that is done, would the way to use your bubble event be to attach its mouse events to glass layer on the top of everything and emit as they get called? Question got a bit long. I really appreciate PIXI.js as I use it together with Ejecta and Leaflet. I look forward to becoming a real contributor!

[xerver]

Pixi.js is a scene graph. Nodes have children, that have children. When I say "bubbles up the scene graph" I mean an event emitted on an object will then emit from it's parent, then it's parent's parent, etc. Until there are no more parents or stopPropagation() is called.

 

Assuming red is a child of yellow, and blue is a child of red. Clicking on blue should emit the click event on blue, then red, then yellow.

[Eugenius]

Pixi.js is a scene graph. Nodes have children, that have children. When I say "bubbles up the scene graph" I mean an event emitted on an object will then emit from it's parent, then it's parent's parent, etc. Until there are no more parents or stopPropagation() is called.

 

Assuming red is a child of yellow, and blue is a child of red. Clicking on blue should emit the click event on blue, then red, then yellow.

 

Oh yes, that's right I understand it now. Somehow I thought red is blue's parent since it's under blue layer haha.

 

actually the use case I'm doing here is exactly same as OP's work.

 

 

now without red, 

yellow - Stage

blue - Sprite

 

and I have these 3 cases

1. blue gets clicked and both blue's and yellow's listeners are called

2. blue gets clicked and both blue's and stop propagation

3. yellow gets clicked and yellow's listener is called

 

to Achieve case 1 and 2

 

blue.addEventListener('click', function (originalEvent) {

  blue.dispatchEvent('click', originalEvent);

}

 

yellow.addEventListener('click', function (e) {console.log('yellow clicked');});

// for case 1

blue.addEventListener('click', function (e) {console.log('blue clicked');});

// for case 2

blue.addEventListener('click', function (e) {console.log('blue clicked'); e.stopPropagation();});

 

and it'll do the job.

but to achieve case 3, I also need an emitter attached to the yellow but if I click on the blue then the result will be

 

yellow clicked

blue clicked

yellow clicked

 

I was spending hours and hours to get this through without the need of removing emitter from yellow when required and adding it again but still no luck. Would there be a better way you could suggest? Thank you very much for your time!

[Eugenius]

oh.. wait.. my example doesn't seem right for interaction. I realised Event Target has got nothing to do with InteractionManager yet. well it's getting more confusing

[Eugenius]

I just did it in a very hacky way. 

 

I created a glass layer that is DisplayObjectContainer on the very top of everything. 

 

then set the hitArea of the layer as its Stage's size then defined an array to keep all other interactive objects.

 

glass._items = [];

glass._items.push(stage);

glass._items.push(sprite1);

glass._items.push(sprite2);

 

glass.click = function (e) {

    var im = glass.stage.interactionManager

    for (i = glass.length - 1; i >= 0; i--) {

        if (im.hitTest(glass._items, im.mouse) {

            glass._items.emit('click', e);

            return;

        }

    }

}

 

stage.addEventListener('click', do something);

sprite1.addEventListener('click', do something);

 

now I can bubble up to the object's top parent and stop propagation as I need.

 

Altho I would love to have a flawless way but think this could do the job. 

Please advise me if you guys have a better solution!