mouseover event works only once

[cnwerb]

I have created a custom class which extends PIXI.Container, and am using it to aggregate manage a group of sprites. I want to add a mouseover event to one of the sprites contained in this Container, but for some reason, the event only works once.

Here's the relevant code:

export class OperationInstance extends Container {

    public baseOperation;

    constructor(operation: Operation, mousePosition){
        super();

        this.baseOperation = operation;

        var backgroundSprite = PIXI.Sprite.fromImage(path);
        backgroundSprite.interactive = true;
        backgroundSprite.anchor.set(0.4, 0.5);
        backgroundSprite.scale.set(0.3, 0.3);
        backgroundSprite.position.set(mousePosition.x, mousePosition.y);
        backgroundSprite.mouseover = this.mouseoverAction();

        this.addChild(backgroundSprite);
    }

    mouseoverAction(){
        console.log("mouseover on " + this.baseOperation.name);
    }
}

Note this class is created when dropped onto the pixi root Container.

When the drop happens, mouseoverAction() is called and logs to the cancel, which is understandable as in the moment it is created, the mouse is over the sprite. However, after this, if the mouse is moved over the sprite, nothing happens.

What could cause this?

[cnwerb]

After a bit of trial and error I've found this works:

backgroundSprite.on('mouseover', function(event){
     console.log("boom");
});

Why is it this works but the other way doesn't? Could this be a bug in pixi?

[themoonrat]

I believe the first one doesn't work due to scoping? If you did 

backgroundSprite.mouseover = function(event){ console.log("boom"); });

Then it would work too.

I personally prefer the second syntax. It also allows you to pass through the binding to use, so you could do 

backgroundSprite.on('mouseover', this.mouseoverAction, this);

Finally, you could do these mouse events on the container itself, allowing the whole group to respond rather than just the background. You may not want that, but letting you know it can be done! 

Ps on mobile, apologies if formatting comes out awful

 

 

 

[cnwerb]

On 12/15/2016 at 8:19 PM, themoonrat said:

backgroundSprite.on('mouseover', this.mouseoverAction, this);

This worked perfectly! Thank you!