Today I have a quick note for you that will probably save you time someday. Basically it’s a workaround for a bug when you have parent element with children elements and parent element has mouseover or mouseout event. Moving your mouse over children elements may fire mouseout
event of their parent. This is caused by event bubbling / propagation and if you would like to have a quick solution just read the solution at the bottom of this post. If you would like to understand it in more details please search Google for event propagation.
The problem:
When you have mouseover
and mouseout
events bound to some element on you page with children elements. Hovering over children element fires parent’s mouseover
and/or mouseout
event.
The solution:
The solution to this error is to use mouseenter
and mouseleave
events instead of mouseover
and mouseout
.
The reason:
This solution works because mouseover and mouseout events do not bubble from child to parent element.