javascript onmouseout applied to div fired by children

Question

I'm having trouble finding a solution to this via google but I would have assumed it would be quite a common problem. I have a div which I have applied an onmouseout event handler to (the handler is used to roll a menu up using jquerys "slideup" function, as I would like the menu to be hidden when the mouse leaves). Problem is that the child elements of that div also cause the handler to fire (I accept that this is by design due to the nature of the bubbling event model). Now what I would like to know is what is the best way to ignore these events that are triggered by the divs children and only roll the menu up when the mouse leaves the div the event is applied to.

Thanks

Answer 1

What you are looking for is mouseenter and mouseleave.

A good example can be found at this link (they have compared both mouseenter and mouseover)

http://docs.jquery.com/Events/mouseover

A blog entry

http://blogs.oracle.com/greimer/entry/mouse_over_out_versus_mouse