Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Recursive DOM problem

Reply
Thread Tools

Recursive DOM problem

 
 
Kristian
Guest
Posts: n/a
 
      11-04-2004
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[i] );
}
}
}
</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?
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      11-04-2004


Kristian wrote:

> <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;
}
}


--

Martin Honnen
http://JavaScript.FAQTs.com/
 
Reply With Quote
 
 
 
 
Daniel Kirsch
Guest
Posts: n/a
 
      11-04-2004
Martin Honnen wrote:
> 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
 
Reply With Quote
 
Martin Honnen
Guest
Posts: n/a
 
      11-04-2004


Daniel Kirsch wrote:
> Martin Honnen wrote:
>
>> 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()



> 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.

--

Martin Honnen
http://JavaScript.FAQTs.com/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Recursive functions Vs Non-recursive functions - performance aspect vamsi C Programming 21 03-09-2009 10:53 PM
Two recursive calls inside of a recursive function n00m C++ 12 03-13-2008 03:18 PM
What is the difference between DOM Level 1 and DOM Level 2. mike XML 1 11-20-2004 03:19 PM
Difference between pure DOM and JAXP over DOM ?? Thorsten Meininger XML 0 07-28-2004 08:51 AM
Difference between pure DOM and JAXP over DOM ?? Thorsten Meininger Java 0 07-28-2004 08:51 AM



Advertisments