Geek Answers Handbook

Javascript: multiple mouseout events triggered

I know the different event models in Javascript (WC3 model compared to Microsoft model), as well as the difference between bubbles and capture. However, after a few hours, reading various articles about this problem, I'm still not sure how to correctly code the following seemingly simple behavior:

If I have an outer divand inner element div, I want one mouse-out event to fire when the mouse leaves the outer-div. When the mouse crosses the inner-div into the outer-div, nothing should happen, and when the mouse crosses the outer-div into an inner div, nothing should happen. The event should fire only if the mouse moves from an external div to a neighboring page.

<div id="outer" style = "width:20em; height:20em; border:1px solid #F00" align = "center" onmouseout="alert('mouseout event!')" >
<div id="inner" style = "width:18em; height:18em; border:1px solid #000"></div>
</div>

Now, if I place the "mouseout" event on the outer-div, when I click from the inner-div on the neighboring page, two mouse-out events are fired, because the event fires once when the mouse moves from the inner to the outer, and then again. when it moves from the outside to the surrounding page.

I know that I can cancel the event using ev.stopPropagation(), so I tried to register an event handler with an internal-div to cancel the event propagation. However, this will not prevent the event from firing when the mouse moves from the outer-div to the inner-div.

, , , . , JQuery, , Javascript.

+5
1

mouseout div ' div. , div, target event:

<div id="outer">
    <div id="inner">x</div>
</div>

document.getElementById('outer').onmouseout= function(event) {
    // deal with IE nonsense
    if (event===undefined) event= window.event;
    var target= 'target' in event? event.target : event.srcElement;

    if (target!==this) return;
    ...
};

mouseout , , "" , "" . , , :

    var other= 'relatedTarget' in event? event.relatedTarget : event.toElement;
    while ((other= other.parentNode).nodeType===1)
        if (other===this) return;

mousein/mouseout: , . , , mouseenter/mouseleave, , mouseleave, ---.

, mouseenter/mouseleave IE. , , , DOM Level 3 Events.

+6

More articles:


All Articles