Event processing

[arcnor]

Hi!

 

I'm just trying pixi.js, and I've created the following code:

var bigSpr = PIXI.Sprite.fromImage("big.png")var smallSpr = PIXI.Sprite.fromImage("small.png")bigSpr.interactive = smallSpr.interactive = truebigSpr.click = function(data) {    console.log("Big")}smallSpr.click = function(data) {    console.log("Small")}bigSpr.addChild(smallSpr)

My questions are:

 

1) I was expecting when clicking on the small sprite to get printed "Small", and then "Big". But I'm getting the opposite!

 

2) I've tried to call "data.originalEvent.stopPropagation()" but I'm still seeing both things printed, so the event is still bubbling.

 

Am I doing something wrong, or is this how Pixi is supposed to work?

 

Thanks in advance!

[LinkTree]

I am not 100% sure but I think that this is because pixi unlike the browser DOM doesn't have event bubbling. I think pixi listens for clicks within the stage and handles them if they are within the bounderies of an interactive object but again I could be completely wrong as I haven't checked this throughly.

I assume the reason you get "Big" before "Small" is because it depends on the order the objects were added to the stage.

[arcnor]

Well, I saw something about bubbling on a PR that got merged, but either that's not working or I'm missing something.

[xerver]

The event system does bubble up the scene graph, however the interaction manager does not use events. It uses raw callbacks. Notice how you assign a function to a property, not add a listener based on a string event name.

 

Basically the interaction manager just iterates over all interactive items and calls the callbacks it should when an event happens. You can't prevent it from calling other callbacks or anything like that. If you have issue with the order of things being called, or not being able to use proper events post an issue on github to bring attention to it.

[arcnor]

So, is there a way of adding event listeners instead of using this interaction manager? I don't see anything on the docs, and looking through the code it seems I can add listeners for stuff like "texture loaded", but not for "clicked". Am I correct?

[xerver]

Like I said the interaction manager doesn't use events. If you have issue with the order of things being called, or not being able to use proper events post an issue on github to bring attention to it.

[norcrel]

So, is there a way of adding event listeners instead of using this interaction manager? I don't see anything on the docs, and looking through the code it seems I can add listeners for stuff like "texture loaded", but not for "clicked". Am I correct?

 

I'm having the same issue and can't find a workaround even with event listeners. Even if I send custom events using event listeners the problem of not knowing the origin of the event still remains. The only workaround I can think of now is running through the scene and doing a hit-test again that I assume was run to generate the event in the first place.

 

I'm going to look into Pixi's source tomorrow and see if I can get a better solution. I assume it has to do with the line under InteractionManager.hitTest, the block at the very end looks like this:

    var length = item.children.length;    for (i = 0; i < length; i++)    {        var tempItem = item.children[i];        var hit = this.hitTest(tempItem, interactionData);        if (hit)        {            // hmm.. TODO SET CORRECT TARGET?            interactionData.target = item;            return true;        }    }    return false;

Edit: Code block formatting was messed up

Edited December 17, 2014 by norcrel