IE, ULs and onmouseover/out

[Twey]

It seems to me that IE6 only registers elements within a UL when calculating onmouseover and onmouseout, not the UL itself; for example, if one has the following structure:

<ul onmouseout="window.alert('event triggered');">
  <li>Some text</li>
  <li>Some more text</li>
</ul>

... the event will trigger when moving the mouse between the two items. Is there any way around this rather peculiar behaviour?

[jscheuer1]

Seems about the same in Opera. I don't think assigning the event to a container would work either. Take a look at the anylink drop down menu. The code uses the over event of the menu to cancel the out event of the triggering element which is a setTimeout variable. This allows the menu to continue to display while the mouse is over the menu but out from the triggering anchor. Assigning the out of the li's to cancel the out of th ul itself in a similar fashion could work but, I think this also unlikely, though more promising. You may be stuck if you are depending upon an over event of the ul as apparently it only exists through its li's, at least in Opera and IE.

[Twey]

It doesn't happen to me in Opera; only IE. Nevertheless, thanks.

[mwinter]

It seems to me that IE6 only registers elements within a UL when calculating onmouseover and onmouseout, not the UL itself

It doesn't, but its behaviour is strange. Consider:

<ul onmouseout="alert('Leaving...');" style="border: 1px solid; padding: 1em;">
  <li style="border: 1px solid;">A</li>
  <li style="border: 1px solid;">B</li>
</ul>

which clearly shows the boundaries of each element. An event is dispatched if you move your mouse out of the top of the list, but not the bottom.

the event will trigger when moving the mouse between the two items. Is there any way around this rather peculiar behaviour?

You're experiencing event bubbling, here. If you're only concerned about events occurring with the list itself, compare the this operator value with the target/srcElement property of the event object.

Mike

[Twey]

You're experiencing event bubbling, here. If you're only concerned about events occurring with the list itself, compare the this operator value with the target/srcElement property of the event object.

Firstly, why does it only happen with IE? Secondly, how exactly should I use these? Comparing with event.target works fine in everything but IE (in other words, makes no difference at all); comparing with event.srcElement always seems to return false, although I can't really tell in IE because as soon as the mouse leaves the menu heading, the menu closes.

[mwinter]

Firstly, why does it only happen with IE?

Bubbling? It occurs in all browsers.

Secondly, how exactly should I use these?

Perhaps you should first state what you're trying to do.

Comparing with event.target works fine in everything but IE (in other words, makes no difference at all); comparing with event.srcElement always seems to return false

It won't.

function doStuff(element, event) {
  var target = event.target || event.srcElement;

  if (target) {
    alert('Node: ' + target.nodeName
      + '\nDispatcher is list: ' + (element == target));
  }
}

<ul style="border: 1px solid; padding: 1em;" onmouseout="doStuff(this, event);">
  <li style="border: 1px solid;">A</li>
  <li style="border: 1px solid;">B</li>
</ul>

Use the keyboard to dismiss the dialogue box. You will see the pattern 'UL', 'LI', 'LI', 'UL', and 'true', 'false', 'false', 'true'. It will be different with IE in that no event will be triggered by the lower padding region of the list, so one of the 'UL' and 'true' results will be missing; when depends on the direction of the mouse over the list.

Mike