By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,360 Members | 3,011 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,360 IT Pros & Developers. It's quick & easy.

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

P: n/a
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>

Dec 21 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
VK

BKDotCom wrote:
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.lang.javascript/browse_frm/thread/083ed9630b81dee9/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".

Dec 21 '05 #2

P: n/a
BKDotCom wrote:
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>
[...]

--
Rob
Dec 22 '05 #3

P: n/a
> 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/domr...ent_ref20.html
--
"Invente, Tente!!! Faça um código eficiente" (eu)

Jonas Raoni Soares Silva
---------------------------
jonasraoni at gmail dot com
http://www.jsfromhell.com

Dec 22 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.