I have this basic structure on my website:

 
<div ONMOUSEOUT goes here>
      <ul>
          <li><a></a></li>
          <li><a></a></li>
          <li><a></a></li>
      </ul>
      <div>
      ...
      </div>
</div>

I have onmouseover events for each li which is working fine. What is not working correctly is that the onmouseout event is triggered at times besides mousing out of the topmost level div. I saw someone refer to this as bubbling on a different site, but I dont know how to account for it. Can anyone help or refer me to somewhere that can?

Thanks!!!

Here's a good study guide that helps explain bubbling and event order: http://www.quirksmode.org/js/events_order.html

Thanks for the link...

I'm not really up on my javascript as well as I probably should be... In the cross browser compatible example:

 
function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}

Looks like the same code twice for different broswers--can someone explain this a bit? I'm not sure where this is supposed to be called in my code--do I just add 2 elses to run my code if the if-conditions are not satisfied?

Really, Really appreciate it!

e.stopPropagation stops the event from bubbling to the parent element, and stops the default action from happening (link being followed, form being submitted, etc). This is the W3C standard way of handling things.

e.cancelBubble=true does the same thing, but for IE (stopPropogation isn't supported in this browser).

Wayfarer,

Thanks for explaining the W3C vs IE requirements, but I still am not having any success. My code has changed a bit while working on it, here is the latest (very similar). Thanks so much in advance!

html:

 
<div onmouseout="addStyle('feat_main');" >
      <ul>
          <li><a></a></li>
          <li><a></a></li>
          <li><a></a></li>
      </ul>
      <div>
      ...
      </div>
</div>

Functions:

 
function addStyle(e, x)
{
 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

 removeAllStyle();
 document.getElementById(x).style.display="block";
}
 
function removeAllStyle()
 {
     removeStyle('feat_main');
     removeStyle('feat_hurricane');
     removeStyle('feat_fabrication');
     removeStyle('feat_capsnap');
     removeStyle('feat_medical');
     removeStyle('feat_media');
 }

I cannot for the life of me get this code to work properly in any browser! (Though I'm closer thanks to help on this forum) All I have been trying to achieve the last 2 days is to get the addStyleDiv function to only call the addStyle function when it sees that it is mousing out of the div with id='rollover'

That is, not call addStyle on the elements within the div, only when it is completely outside of the rollover div. Right now, every element within the rollover div triggers the onmouseout event except mousing out of the actual rollover div. (the exact opposite of what I want) I would like this to work on all mainstream browsers, so please let me know if my code will only work with some (and how to fix it).

Latest html:

 
<div id="rollover" onmouseout="addStyleDiv(event,'feat_main');">
<ul id="featured">  
<li class="medical" onmouseover="addStyle('feat_medical');"><a href="equipment/medical">Medical</a></li>
<li class="fabrication" onmouseover="addStyle('feat_fabrication');"><a href="services/metal_fabrication">Fabrication</a></li>
<li class="capsnap" onmouseover="addStyle('feat_capsnap');"><a href="equipment/capsnap">CapSnap&trade;</a></li>
<li class="hurricane" onmouseover="addStyle('feat_hurricane');"><a  href="equipment/parts_washing/hurricane">Hurricane</a></li>
<li class="media" onmouseover="addStyle('feat_media');"><a href="video">Media</a></li>
</ul>
<div id="flyout" >
    <ul id="feat_main">
        <h1>Midbrook</h1>
        standard page no rollover
    </ul>
    <ul id = feat_medical>
        <h1>Medical</h1> 
    </ul>
    <ul id = feat_fabrication>
        <h1>Fabrication</h1>
    </ul> 
    <ul id = feat_capsnap>
        <h1>CapSnap</h1>
    </ul>
    <ul id="feat_hurricane">
        <h1>Hurricane</h1>
    </ul>
    <ul id = feat_media>
        <h1>Media</h1>
    </ul>   
</div>
</div>

latest JS functions:

 
 
function addStyleDiv(e, x)
{
   if (!e) var e = window.event;
   var tg=(window.event) ? e.srcelement : e.target;
 
 if (tg.id != 'rollover') 
 {
     alert('leaving '+tg.tagName + ' '+tg.id);
     return;
 }
   /*These next two lines are NEVER reached no matter what*/
   alert('It must have finally seen rollover');
   addStyle('feat_main');
}
 
function addStyle(x){
 removeAllStyle();
 document.getElementById(x).style.display="block";
}
function removeAllStyle()
 {
     removeStyle('feat_main');
     removeStyle('feat_hurricane');
     removeStyle('feat_fabrication');
     removeStyle('feat_capsnap');
     removeStyle('feat_medical');
     removeStyle('feat_media');
 }

Thanks so much in advance. I'm dying to have this working.