Mouse Out event not detected | HTML5 Canvas JS

[pmwpmw]

Hello

Mouse Over events are detected, but Mouse Out events are not. An animation  plays on MouseOver, and it is supposed to animate back to its original state and MouseOut. Below is my code and a video of the issue to further clairfy. Any tips? Something I'm missing?

stage.enableMouseOver(3);
this.work.addEventListener("mouseover", MouseEventHandler.bind(this));
this.work.addEventListener("mouseout", MouseEventHandler.bind(this));
function MouseEventHandler(e) {
     e.currentTarget.play();
     alert(e.type);
}

(note: I have three MovieClips in my canvas, but have isolated one in this example just to make things simple)

in this video, you see an alert on MouseOver and then nothing on when the Mouse Out. Only another MouseOver event triggers the animation the animation.

[kglad]

there's no problem with your code.

i suspect there's a problem with the way you're testing or you may be eliminating the mouseout when work plays.  (ie, put an unanimated rect with alpha=1 where you want to trigger the mouseover and mouseout.)

[pmwpmw]

Adding the transparent rectangle in the MovieClip did help with MouseOut events, so thanks for that! But, they are still acting bizarre. Here is another video illustrating the odd behavior and the code that goes along with it (not too different than the code above). In the video, I first show the events with alerts, and then without.

Hoping someone has any tips for more immediate and accurate response on MouseOver and MouseOut events. Thank you.

stage.enableMouseOver(3);
this.work.addEventListener("mouseover", MouseEventHandler.bind(this));
this.work.addEventListener("mouseout", MouseEventHandler.bind(this));
this.info.addEventListener("mouseover", MouseEventHandler.bind(this));
this.info.addEventListener("mouseout", MouseEventHandler.bind(this));
this.news.addEventListener("mouseover", MouseEventHandler.bind(this));
this.news.addEventListener("mouseout", MouseEventHandler.bind(this));
function MouseEventHandler(e) {
     e.currentTarget.play();
     alert(e.type);
}

[ClayUUID · Accepted solution]

Try using rollout instead of mouseout.

[pmwpmw]

the roll over worked perfectly, thanks! I wonder what the difference between MouseOver/Out and Roll Over/Out is? @kglad your test works well too, thanks!

edit: for archival purposes, in the code above you switch

1. this.work.addEventListener("mouseover", MouseEventHandler.bind(this)); 
2. this.work.addEventListener("mouseout", MouseEventHandler.bind(this));

to

1. this.work.addEventListener("rollover", MouseEventHandler.bind(this)); 
2. this.work.addEventListener("rollout", MouseEventHandler.bind(this));

[ClayUUID]

pmwpmw  wrote

the roll over worked perfectly, thanks! I wonder what the difference between MouseOver/Out and Roll Over/Out is?

You don't have to wonder, it says exactly what the difference is in the docs:

This event is similar to mouseout, with the following differences: it does not bubble, and it considers Container instances as an aggregate of their content.

For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over shapeA, then directly on to shapeB, then off both. With a listener for Mouseout:event on myContainer, two events would be received, each targeting a child element:

1. when the mouse leaves shapeA (target=shapeA)
2. when the mouse leaves shapeB (target=shapeB)

However, with a listener for "rollout" instead, only a single event is received when the mouse leaves the aggregate myContainer content (target=myContainer).

https://createjs.com/docs/easeljs/classes/DisplayObject.html#event_rollout

[pmwpmw]

thank you so much for posting that! I was looking through the documentation earlier, but when I searched "rollover" or "rollout" on the API filter, it returned nothing. I guess it only gives results for Classes and not the methods, properties, and events.

Now I know I need to look more closely. I didn't realize before that the events were part of the DisplayObjects class.

thanks again!

[ClayUUID]

"The events" aren't part of the DisplayObject class. The base event system is implemented by the EventDispatcher class. Then the other classes add their own relevant events. DisplayObject and Stage add mouse events. The Ticker supports a "tick" event. Etc.

[kglad]

do you see a problem here, test