I'm aware of
the different event models in Javascript (the WC3 model versus
the Microsoft model), as well as
the difference between bubbling and capturing. However, after a few hours reading various articles about this issue, I'm still unsure how to properly code
the following seemingly simple behavior:
If I have an outer div and an inner div element, I want a single mouse-out event to be triggered when
the mouse leaves
the outer-div. When
the mouse crosses from
the inner-div to
the outer-div, nothing should happen, and when
the mouse crosses from
the outer-div to
the inner-div nothing should happen.
The event should only fire if
the mouse moves from
the outer-div to
the surrounding 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, two mouse-out
events are fired when
the mouse moves from
the inner-div to
the surrounding page, because
the event fires once when
the mouse moves from inner to outer, and then again when it moves from outer to
the surrounding page.
I know I can cancel
the event using ev.stopPropagation(), so I tried registering an event handler with
the inner-div to cancel
the event propagation. However, this won't prevent
the event from firing when
the mouse moves from
the outer-div to
the inner-div.
So, unless I'm overlooking something, it seems to me this behavior can't be accomplished without complex mouse-tracking functions. In
the future, I plan to reimplement a lot of this code using a more advanced framework, like JQuery, but for now, I'm wondering if there is a simple way to implement
the above behavior in regular Javascript.
