please explain this "simple" mouseover behavior... bubbling?

[BKDotCom]

This has surely been answered somewhere multiple times, but...
I'm guessing it's some sort of "bubbling" thing....

<STYLE>
..triggerarea {
border:#00C solid 1px;
}
</STYLE>

<UL ID="menu">
<LI class="triggerarea" onmouseover="alert('triggered');">Here's nested
list...
<UL>
<LI>Why does mousing over each individual</LI>
<LI>list item trigger the event?</LI>
<LI>I only want/expect it to be triggered</LI>
<LI>by the "container" LIs </LI>
<LI>(which I've put a blue border around)</LI>
<LI class="triggerarea" onmouseover="alert('triggered');">another
nested list
<UL>
<LI>again, every LI is triggering</LI>
<LI>not just the container</LI>
</UL>
</LI>
<LI><A HREF="#">A Link</A></LI>
<LI>Nothing to see here</LI>
</UL>
</LI>
<LI>this item shouldn't and doesn't do anything</LI>
</UL>

 

[VK]

This has surely been answered somewhere multiple times, but...
I'm guessing it's some sort of "bubbling" thing....

You are right with both of your guessings
<http://groups.google.com/group/comp...9630b81dee9/cd81fab7ffdfadd7#cd81fab7ffdfadd7>

btw: there is nothing "simple" in this problem. That is one of these
"simple" things which leaves hell's doors loose.
Another "simple" question of such kind is for instance "how to know the
exact position of element on the page".

 

[RobG]

This has surely been answered somewhere multiple times, but...
I'm guessing it's some sort of "bubbling" thing....

Yes. It's not simple but it's not too hard once you get your head
around the solution. There is no need to wade through the thread posted
by VK (but do so if you want to bone-up on inter-poster rivalry).

Read (and follow the "next" links):

<URL:http://www.quirksmode.org/js/introevents.html>


[...]

 

[Jonas Raoni]

Why does mousing over each individual list item trigger the event?

Because when you move your mouse towards to another element (even if
it's inside the <ul>), you're firing the <ul>'s mouseout...

But due to event bubbling, when you're over the <li>, the <ul>
mouseover is fired again...

I only want/expect it to be triggered by the "container" LIs

You still can achieve this objective, but the possible solutions that I
see are ugly, since you'll have to control where the mouse is in a
sort of manually way ;]

Maybe this can be useful:
http://www.mozilla.org/docs/dom/domref/dom_event_ref20.html