JavaScript and DOM and nested <divs>
JavaScript and DOM and nested <divs>
(OP)
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
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
Talk To Other Members
RE: JavaScript and DOM and nested <divs>
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
RE: JavaScript and DOM and nested <divs>
window.event.cancelBubble = true;
which suppose to stop the event bubble up the hierarchy.
example: http://msdn.microsoft.com/library/default.asp?url=/work...
RE: JavaScript and DOM and nested <divs>
<!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].
RE: JavaScript and DOM and nested <divs>
<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>
RE: JavaScript and DOM and nested <divs>
(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].
RE: JavaScript and DOM and nested <divs>
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
RE: JavaScript and DOM and nested <divs>
Dave
"Credit belongs to the man who is actually in the arena - T.Roosevelt"