mouseover works but mouseout don't? can't retrieve event.target

[RomainMazB]

Hi all.

New to PixiJS, I'm working on a divination card game.

I just want to add a basic animation on card mouseover/mouseout: just change the z position +/-10.

In my code mouseover works, but mouseout don't:

card.interactive = true;
card.on('mouseover', onMouseOver);
card.on('mouseout', onMouseOut);

function onMouseOver(event) {
  event.target.position3d.y += 10;
}

function onMouseOut(event) {
  console.log(event.target); // Fire null
  event.target.position3d.y -= 10;
}

I also tried mouseleave: same result.

Any idea?

[ivan.popelyshev]

That demo uses pixi-layers. It hacks interaction.

Update pixi-layers to latest version. i guess i didnt upload it to pixi-examples yet

[jonforum]

use `event.currentTarget` no ?

[RomainMazB]

1 hour ago, ivan.popelyshev said:

That demo uses pixi-layers. It hacks interaction.

Update pixi-layers to latest version. i guess i didnt upload it to pixi-examples yet

I'm using the latest version of pixi-layers

1 hour ago, jonforum said:

use `event.currentTarget` no ?

currentTarget is null too.

you can see below in attachment console.log(event) inside of onMouseOut callback

 

In some thread I see people use hitArea which I'm not using. Should I? I supposed if I don't need to mouseover, I don't need either to mouseout?

[ivan.popelyshev]

OK then. Can you please check it in vanilla pixi without any plugins, just on a sprite? I want to know the scope of the bug.

[mobileben]

Have you tried to use pointerout? The currentTarget is set for that. I use pointerover/pointerout for my hover code. Are you just trying to animate an object on hover? 

I don't care about target. If card has the position3d property, then just use an arrow function to get the proper this context.

This would change your code. to look like.

card.interactive = true;
card.on('mouseover', event => {
	this.position3d.y += 10;
});

card.on('mouseout', event => {
	this.position3d.y -= 10;
});

 

[RomainMazB]

See this fiddle, based on the first interaction example.

both over and out return null for target

2 minutes ago, mobileben said:

Have you tried to use pointerout? The currentTarget is set for that. I use pointerover/pointerout for my hover code. Are you just trying to animate an object on hover? 

I don't care about target. If card has the position3d property, then just use an arrow function to get the proper this context.

This would change your code. to look like.

card.interactive = true;
card.on('mouseover', event => {
	this.position3d.y += 10;
});

card.on('mouseout', event => {
	this.position3d.y -= 10;
});

 

I tried pointerout with the callback. I'll check with the arrow function

[ivan.popelyshev]

 

1 minute ago, mobileben said:

I don't care about target. If card has the position3d property, then just use an arrow function to get the proper this context.

That means *5 *2 new function objects. Some people dont like that

without arrow function , just function with "this" will take care about it.

[ivan.popelyshev]

OK, then i think you can report this as a probable bug in pixijs issues https://github.com/pixijs/pixi.js/issues . Our top expert on interaction answers there, and either provides workaround either fixes this thing. The bug is already reported, its just a formality that we use your github tag in release if its real bug.

Its good that you already have the demo, we dont need to use telepathy anymore.

[ivan.popelyshev]

Oh, right, WELCOME TO THE FORUMS!

[RomainMazB]

@mobileben

card.interactive = true;

card.on('pointerover', event => {
  this.position3d.y += 10;
});
card.on('pointerout', event => {
  this.position3d.y -= 10;
});

says to me: Uncaught TypeError: Cannot read property 'y' of undefined

and this:

card.on('pointerover', event => {
  event.target.position3d.y += 10;
});
card.on('pointerout', event => {
  event.target.position3d.y -= 10;
});

render the same result as the beginning: pointerover works well, pointerout don't...

@ivan.popelyshev Thanks for the welcoming

[mobileben]

Fair point about the new function objects ?!

I think the reason there is not target is that it fails the hit test. The actual DisplayObject in question no longer has the point within the object. Hence target cannot be set to it (I looked at the code in a debugger).  I believe in this case, if currentTarget is set, it is the parent.

This is the normal code that should set the appropriate target (Pixi.js code).

            if (displayObject.interactive)
            {
                if (hit && !interactionEvent.target)
                {
                    interactionEvent.target = displayObject;
                }

                if (func)
                {
                    func(interactionEvent, displayObject, !!hit);
                }
            }

 

 

[mobileben]

Bizarre. I'm nascent with Javascript/Typescript. Try this variant. 

card.on('pointerout', event => {
  card.position3d.y -= 10;
});

It is probably grabbing the `this` context from the current scope that  card is in.

[ivan.popelyshev]

13 minutes ago, RomainMazB said:

@mobileben

card.interactive = true;

card.on('pointerover', event => {
  this.position3d.y += 10;
});
card.on('pointerout', event => {
  this.position3d.y -= 10;
});

says to me: Uncaught TypeError: Cannot read property 'y' of undefined

and this:

card.on('pointerover', event => {
  event.target.position3d.y += 10;
});
card.on('pointerout', event => {
  event.target.position3d.y -= 10;
});

render the same result as the beginning: pointerover works well, pointerout don't...

@ivan.popelyshev Thanks for the welcoming

try simple function, not a lambda. 

function(event) { this.position3d.y += 30;}

[jonforum]

if you console.log  object without a breakpoint, when you open reference of the object in developer tool, it will refresh and you will see null on target it normal.
Try add break point just after fired.
Open developer tool before mouse hover in this example, it should work.
https://www.pixiplayground.com/#/edit/dBu7ExlkcemL_VzPC4WrD


 

[ivan.popelyshev]

@jonforum he logs not event but "event.target" => its not the case. Fields may be changed in async debugging, but not the original passed reference.

[jonforum]

for me it look logic or maybe am not understand the issue here!
If i have A and B , and B is inside A.
If i out B.
A will be target and B currentTarget.

 

if i out A
target will null
currentTarget will be A.

 

Am out ?

[mobileben]

I think the problem is the implementation and the definition of how `target` gets assigned. Keep in mind that how the browser handles the mouse events is different than how pixi does. Pixi essentially transforms it into "pixi space" or rather the node hierarchy. Mozilla documentation indicates that mouseout would have an assigned target. 

Based on the code base, `processInteractive` is responsible for `target` assignment and that is assigned based on hit, where hit has several criteria much of which is dependent upon the point being within the DisplayObject. Since, when there is a mouseout, the point is no longer in the affected DisplayObject, target will be null.

So what ends up happening (at least in my test cases) is that target == null and currentTarget = parent.

@RomainMazB you may want to think about creating a class for your cards. This would make it easier to manage your cards.

[ivan.popelyshev]

yes, class + this.stuff.bind(this) should work too. There are many ways. Though i prefer if we actually have Issue in github that way we can answer it and decide whether to change behaviour in near future.

btw, cards example is mine

[jonforum]

i was made this demo, maybe it will be more revelen
with class 
https://www.pixiplayground.com/#/edit/WqMGLC7M3Fre3boCU1c1b

[mobileben]

Nice code sample! Obviously doesn't use `event.target`, but I think this type of approach works well. 

[jonforum]

ya, it was for another test from a bug related to interactiveChildren and hitArea but if you add some console.log target in BLUESQUARE interaction you should able to log the parent target

[RomainMazB]

@mobileben I already have a class for my cards. In fact I base my script on the 3D Cards example.

@jonforum Class auto bind works perfectly!

@ivan.popelyshev Thanks for the example, it's really great and made me choose PixiJS than an other game engine. I have to create this little game for now but I'm not a full-time game maker. I'll do the issue report tomorrow with my fiddle for example.

[mobileben]

@ivan.popelyshev I created a issue here:

 

https://github.com/pixijs/pixi.js/issues/6149

[mobileben]

@RomainMazB got it, I perused the code.

Some unsolicited suggestions (feel free to ignore) which may make your life easier, especially given the actual behavior is to make `onClick` part of the CardSprite class and avoid using `event` to derive the target to use.

I would also recommend you wrap setting the card to be interactive and listening to events into another `CardSprite` method. You can control enabling and disabling a card from being interactive as well as listening to the mouse over. This will be helpful if you have several cards where some are interactable but others are not ... and the state can change depending on user actions.