Recursive DOM problem

[Kristian]

This is my document body content:

<div id="nodeTree" class="nodeTree" title="nodeTree">
<div id="Hovedside" title="Hovedside" class="branch">
Hovedside
<div id="Produkter" title="Produkter" class="branch">
Produkter
<div id="Produkter_1" title="Produkter 1" class="branch">
Produkter 1
</div>
<div id="Produkter_2" title="Produkter 2" class="branch">
Produkter 2
<div id="Produkter_2.1" title="Produkter 2.1" class="branch">
Produkter 2.1
</div>
<div id="Produkter_2.2" title="Produkter 2.2" class="branch">
Produkter 2.2
<div id="Produkter_2.2.1" title="Produkter 2.2.1"
class="branch">
Produkter 2.2.1
</div>
</div>
</div>
<div id="Produkter_3" title="Produkter 3" class="branch">
Produkter 3
</div>
</div>
<div id="Service" title="Service" class="branch">
Service
<div id="Udvikling" title="Udvikling" class="branch">
Udvikling
</div>
<div id="Design" title="Design" class="branch">
Design
</div>
</div>
<div id="Om_firmaet" title="Om firmaet" class="branch">
Om firmaet
</div>
</div>
</div>

And this is my script:

<script type="text/javascript">
window.onload = function(){
parseTree( document.getElementById('nodeTree') );
}
function parseTree( n )
{
if( n.nodeType == 1 )
{
n.onclick = function() {
alert(this.getAttribute('id'));
}
}
if( n.hasChildNodes() )
{
for( var i = 0; i < n.childNodes.length; i++ )
{
parseTree( n.childNodes );
}
}
}
</script>

If you test it by clicking 'Produkter_2.2.1' an alert box will show
containing the text 'Produkter_2.2.1' which is exactly what I want.
But it travels all the way back to the root node as well.

How do I stop the function from travelling all the way back to the
root node?

 

[Martin Honnen]

<script type="text/javascript">
window.onload = function(){
parseTree( document.getElementById('nodeTree') );
}
function parseTree( n )
{
if( n.nodeType == 1 )
{
n.onclick = function() {
alert(this.getAttribute('id'));
}

If you test it by clicking 'Produkter_2.2.1' an alert box will show
containing the text 'Produkter_2.2.1' which is exactly what I want.
But it travels all the way back to the root node as well.

How do I stop the function from travelling all the way back to the
root node?

With IE's event model you can set
event.cancelBubble = true
with the W3C DOM as implemented in Mozilla, Netscape 6/7, Opera 7 you
can call
evt.stopPropagation()
e.g.

n.onclick = function(evt) {
alert(this.getAttribute('id'));
if (evt && evt.stopPropagation) {
evt.stopPropagation();
}
if (window.event) {
window.event.cancelBubble = true;
}
}

 

[Daniel Kirsch]

With IE's event model you can set
event.cancelBubble = true
with the W3C DOM as implemented in Mozilla, Netscape 6/7, Opera 7 you
can call
evt.stopPropagation()
e.g.

n.onclick = function(evt) {
alert(this.getAttribute('id'));
if (evt && evt.stopPropagation) {
evt.stopPropagation();
}
if (window.event) {
window.event.cancelBubble = true;
}
}

Actually for supporting IE, Geckos and Opera it's enough to use the
cancelBubble property:

n.onclick = function(e) {
alert(this.getAttribute('id'));
e = e || window.event;
e.cancelBubble = true;
};

Daniel

 

[Martin Honnen]

Actually for supporting IE, Geckos and Opera it's enough to use the
cancelBubble property:

n.onclick = function(e) {
alert(this.getAttribute('id'));
e = e || window.event;
e.cancelBubble = true;
};

While that is shorter and might work the same in the named browsers I
would still suggest to use stopPropagation too as that is what the W3C
DOM standard defines.