Skip to main content
P
pmwpmw
Known Participant
September 2, 2018
Answered

Mouse Out event not detected | HTML5 Canvas JS

  • September 2, 2018
  • 1 reply
  • 3719 views

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.

This topic has been closed for replies.
Correct answer ClayUUID

Try using rollout instead of mouseout.

1 reply

kglad
kglad
Community Expert
September 2, 2018

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

P
pmwpmwAuthor
Known Participant
September 2, 2018

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);
}
C
ClayUUIDCorrect answer
Brainiac
September 2, 2018

Try using rollout instead of mouseout.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices