Jump to content

Event processing


Recommended Posts



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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by norcrel
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...