title: Events still being triggered by children despite stopPropagation() and cancelBubble
body: <p>I have a <code>&lt;div&gt;</code> element (containing my page header) which has an <code>onmouseover</code> event that fades the header into a menu. It also has an <code>onmouseout</code> event that does the reverse. The menu itself is simply a bunch of links and images. When the mouse enters the <code>&lt;div&gt;</code>, it fades just as expected. However, when I move the mouse between elements <em>within</em> the <code>&lt;div&gt;</code>, the <code>onmouseout</code> event is triggered by the element I'm leaving, followed by the <code>onmouseover</code>event of the element I'm entering. I've tried to stop this using <code>stopPropagation</code> and <code>cancelBubble</code>, but to no avail. Here is the relevant code:</p>
  <p>JavaScript (stored in menu.js):</p>
  <pre><code>//These two functions are for rendering the menu. 
  //Fade is a function that fades an element out or in by 
  //changing the opacity of the element.
  
  function renderHeader() {
  fade('menu');
  setTimeout(&quot;document.getElementById('menu').innerHTML=\
  \&quot;&lt;img src='menu_1.png' width=20% /&gt;&lt;img src='menu_2.png' width=20% /&gt;\
  &lt;img src='menu_3.png' width=20% /&gt;&lt;img src='menu_4.png' width=20% /&gt;\
  &lt;img src='menu_5.png' width=20% /&gt;\&quot;&quot;,TimeToFade+33);
  setTimeout(&quot;fade('menu')&quot;,TimeToFade+66);
  }
  
  function renderMenu() {
  fade('menu');
  setTimeout(&quot;document.getElementById('menu').innerHTML=\
  \&quot;&lt;a href='home.asp'&gt;&lt;img src='menu_a.png' width=20% /&gt;&lt;/a&gt;\
  &lt;a href='members.asp'&gt;&lt;img src='menu_b.png' width=20% /&gt;&lt;/a&gt;\
  &lt;a href='locations.asp'&gt;&lt;img src='menu_c.png' width=20% /&gt;&lt;/a&gt;\
  &lt;a href='about.asp'&gt;&lt;img src='menu_d.png' width=20% /&gt;&lt;/a&gt;\
  &lt;a href='services.asp'&gt;&lt;img src='menu_e.png' width=20% /&gt;&lt;/a&gt;\&quot;&quot;,TimeToFade+33);
  setTimeout(&quot;fade('menu')&quot;,TimeToFade+66);
  }
  
  
  //These two functions are responsible for stopping the propagation.
  function load() {
    element = document.getElementById(&quot;menu&quot;);
    element.addEventListener(&quot;mouseover&quot;, stopEvent, false);
    element.addEventListener(&quot;mouseout&quot;, stopEvent, false);
  }
  
  function stopEvent(ev) {
    if (!ev) var ev = window.event;
    ev.cancelBubble = true;
    if (ev.stopPropagation) ev.stopPropagation();
  }
  </code></pre>
  <p>HTML (the <code>&lt;div&gt;</code> element initially shows the header):</p>
  <pre><code>&lt;head&gt;
  ...
  &lt;script type=&quot;text/javascript&quot; src=&quot;Scripts/menu.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload=&quot;load();&quot;&gt;
  &lt;div id='menu' style=&quot;opacity:1;filter:alpha(opacity=100);height:150px&quot;
  onmouseover=&quot;renderMenu()&quot; onmouseout=&quot;renderHeader()&quot;&gt;
  &lt;img src='menu_1.png' width=20% /&gt;&lt;img src='menu_2.png' width=20% /&gt;
  &lt;img src='menu_3.png' width=20% /&gt;&lt;img src='menu_4.png' width=20% /&gt;
  &lt;img src='menu_5.png' width=20% /&gt;&lt;/div&gt;
  </code></pre>