Smart questions
Smart answers
Smart people
Join Tek-Tips Forums
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login




Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.
Jobs from Indeed

Link To This Forum!

Partner Button
Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

JavaScript and DOM and nested <divs>Helpful Member! 

areznik (Programmer) (OP)
29 Oct 03 22:33
Hi,
so here is the question:
i have nested <div> tags like this:

<div id="1"...onclick="javascript: alert(this)">
  <div id="2"...>
    <div id="3"...>
    </div>
  </div>
</div>
 
and when i do onclick for div 1, everything is ok, i get 1
HOWEVER,
when i do the same for div 2, i get 2 alerts!!! wth?
the first one i get id = 2, and the second i get its parent's id !!! why? oh why?
i searched everywhere in the ecma specs, nothing says that is the behaivor...maybe i am doing something wrong, maybe i am not using the id tag correctly...after all there may be some css issue, before i go any further, i thought i would ask here...
Thanks in advance to all those who will read my incoherent ramblings and try to make some sence outta this...
--Alex
Lrnmore (TechnicalUser)
29 Oct 03 23:44
It does make sense in a way because they are nested
sorta like if statements in javascript.

Do they have to be nested??

Can you try spans inside the div closing each one
(don't nest the spans)??

2b||!2b

byam (Programmer)
30 Oct 03 0:14
May be you can try this:

window.event.cancelBubble = true;

which suppose to stop the event bubble up the hierarchy.

example: http://msdn.microsoft.com/library/default.asp?url=/work...

Helpful Member!  clarkin (Programmer)
30 Oct 03 0:16
I think you will have some fairly big problems with nested divs.. Have a look at this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Bed</title>
<style type="text/css">
div {
    border: 1px solid black;
    margin: 10px;
    padding: 20px;
    width: 100px;
    height: 100px;
}
#A {background-color: #DDDDDD;}
#B {background-color: #BBBBBB;}
#C {background-color: #999999;}
</style>
<script language="JavaScript" type="text/javascript">
</script>
</head>
<body>
<div id="A" onclick="alert(this.id);">
|
  <div id="B" onclick="alert(this.id);">
  ||
    <div id="C" onclick="alert(this.id);">
    |||
    </div>
  </div>
</div>
</body>
</html>


it gives in IE 3 boxes one around the other, and in Firebird 3 boxes that look like cascaded windows...

I'd steer clear

Posting code? Wrap it with code tags: [code]CodeHere[/code].

byam (Programmer)
30 Oct 03 0:29
I tested it. it work with cancelBubble. here is the code:


<SCRIPT LANGUAGE="JavaScript">
function checkId()
{
   window.event.cancelBubble = true;
   alert(window.event.srcElement.id);
}

</script>
</head>
<body>
<div id="A" onclick="checkId()">
|
  <div id="B" onclick="checkId()">
  ||
    <div id="C" onclick="checkId()">
    |||
    </div>
  </div>
</div>
clarkin (Programmer)
30 Oct 03 1:01
And the crossbrowser way of er, canceling the event's bubble:
(IE6 & Firebird)

<script language="JavaScript" type="text/javascript">
function check(divObj, evt) {
    evt.cancelBubble = true;
    alert(divObj.id);
}
</script>
</head>
<body>
<div id="A" onclick="check(this, event);">
|
  <div id="B" onclick="check(this, event);">
  ||
    <div id="C" onclick="check(this, event);">
    |||
    </div>
  </div>
</div>

Posting code? Wrap it with code tags: [code]CodeHere[/code].

areznik (Programmer) (OP)
30 Oct 03 10:21
Ok, thanks everybody for the answers, the cancelBubble thing is what did the trick..i guess i have some studying to do about this..
basically i wanted to have nested divs because i am building a tree-like structure with some java on the server side and then showing it in the browser..so when i clicked on the branch, i wanted all its children to show up in my id list, but not its parents...thanks again for all the help, i am sure i will be back soon.
--Alex
fedtrain (Instructor)
5 Jul 04 18:18
The same thing seems to work for span tags.  Now I just need to figure out how to find all the elements within a span...

Dave

"Credit belongs to the man who is actually in the arena - T.Roosevelt"

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close