Trouble Coding an Expanding Tree Menu -- onmouseout and target event different for IE and Gecko

[weston]

So, I'm attempting to code an expanding tree menu, based off of
unordered lists containing unordered lists. I'm also trying to do it in
such a way that none of the javascript has to go inline with the
markup:

http://weston.canncentral.org/misc/webgallery/FMH/template.html

So far, so good. It seems to work in Gecko-based browsers rather well
(mouse-over "Online Services" to see it work).

However, in Internet Explorer, things are a bit different...

For one thing, it initially seemed that the "onmouseout" is not only
triggered by moving outside the LI element that contains the hidden
submenu, but also by moving onto any element which the LI contains. Not
particularly intuitive to me, but I figured I'd just code something
that tests whether the target element of the onmouseout event is a
child of the LI receiving it, and if so, keep the submenu visible, and
if not, hide it.

This helps things work under Safari (which apparently has a similar
event model), but IE still doesn't work. When I move the mouse within
the LI onto some other element contained by the LI, it seems to think
that the target element is the containing DIV (the one id'd as "nav").

Any idea what's going on here? I've been banging my head against this
for a few days...

Thanks,

Weston

 

[VK]

You may want to read through this thread:
<http://groups-beta.google.com/group...9630b81dee9/cd81fab7ffdfadd7#cd81fab7ffdfadd7>

Come back if any more questions.

 

[weston]

Thanks. I'm going to give digesting the thread a shot, and perhaps
recode based on that, but I just noted something else that makes me
skeptical this is purely an event-targeting problem.

Note that in IE, when you mouse over the "Online Services" <li>, the
onmouseover event doesn't fire until you get over the text within the
li. Whereas the green line is actually the border.

If IE is somehow misinterpreting the border of the <li> as the text
node (or anchor surrounding it), the behavior of the script actually
makes sense. And the question becomes: why is it doing that? Is there
any way to force it to stop?

I came up with an idea to test this: IE has an event handler called
"onmouseleave" that does works as you might intuitively expect
"onmouseout" to -- it doesn't fire if you mouseover a subelement, it
only fires if you leave boundaries of the element you assign it to.

http://weston.canncentral.org/misc/webgallery/FMH/onmouseleave.html

Same set of troubles. It looks as if somehow in this case, IE is
confusing the boundaries of the text node with the boundaries of the LI
for event purposes.

This doesn't universally seem to be the case:

http://weston.canncentral.org/misc/webgallery/FMH/testli.html

So... what am I doing that confuses IE?