Jump to content

mouseover event works only once


Recommended Posts

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){

        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();


        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?

Link to comment
Share on other sites

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 :)




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...