title: Javascript: Multiple mouseout events triggered
body: <p>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:</p>
  
  <p>If I have an outer <code>div</code> and an inner <code>div</code> 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 <em>only</em> fire if the mouse moves from the outer-div to the surrounding page.</p>
  
  <pre><code>&lt;div id="outer" style = "width:20em; height:20em; border:1px solid #F00" align = "center" onmouseout="alert('mouseout event!')" &gt;
  &lt;div id="inner" style = "width:18em; height:18em; border:1px solid #000"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, if I place the "mouseout" event on the outer-div, <strong>two</strong> 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.</p>
  
  <p>I know I can cancel the event using <code>ev.stopPropagation()</code>, 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.</p>
  
  <p>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.</p>