Search code examples
javascripthtmlmouseleavemouseenter

Mouseover/leave problem

I have a span that includes an anchor and a span. Example below

<span id="x"><a id="a_in" href="">link</a><span id="x_in">x</span></span>

Now I am attaching a mousenter / mouseleave event on the span with id="x". When I mouse over the the span id="x" it triggers the mousenter / mouseleave that's fine. The problem is when I mouseover the span id="x_1" inside the parent span mouseleave gets triggered.

I want mousenter / mouseleave to be triggered only when I mouseenter or mouseleave the parent.

Any ideas how to avoid this?

Solution

  • OK...thank you guys. The prob was on a new div that I was showing on the mouseenter which overlapped my SPAN X and triggered mouseleave.

    Also...

    MooTools features mouseenter and mouseleave because mouseover/mouseout sometimes just does not work as expected. Mouseenter only fires once you enter the element and does not fire again if your mouse crosses over children of the element.

    ...so pretty much it does what you guys are suggesting and it works fine. http://demos.mootools.net/Mouseenter

    Just in case someone is looking for how to stop propagation using mootools...

    $('myelement').addEvent('click', function (e) { var event = e || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } });

    Thank you for your help!