CODEWITHSUNDEEP
javascriptdom-eventsmouseout
Ron
Ron

Reputation: 4095

JavaScript mouseout triggered when over children

I am working on menu to my website and I need to user over/out to show/hide submenu + animation.

I got the following code: http://jsfiddle.net/JyTPW/

When I mouseover "products" and then go to child element, the mouseout is triggered. I tried to fix it but I failed. I read all the posts about checking the reltarget and etc but still I failed to make it work.

I would really appreciate your help.

Edit:
After long search I found Cross-browser event registration which provide mouseenter and mouseleave.
It fixed my problem.

Upvotes: 2

Views: 1270

Answers (2)

Kevin Cox
Kevin Cox

Reputation: 3233

Looking at the jQuery source (open source is the best) you can see how they implemented it.

https://github.com/jquery/jquery/blob/91824bd2923b99b03fd1a9c4447b46fd7cc96615/src/event.js#L659

While some jQuery APIs are used inside the handler you can clearly see how it works. It checks the mouseover event object and checks if the relatedTarget is the element itself or a descendant. If it is, it calls the callback triggers mouseleave.

Upvotes: 0

japrescott
japrescott

Reputation: 5023

Well, if you think about it, it is doing it as expected. But not as a programmer would like it. Microsoft went the way of doing what you wanted. Everyone else, didnt. The solution? Use jQuery and listen to the custom mousenter/mouseleave event

Upvotes: 4

Related Questions