Recursive DOM problem

Discussion in 'Javascript' started by Kristian, Nov 4, 2004.

  1. Kristian

    Kristian Guest

    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?
     
    Kristian, Nov 4, 2004
    #1
    1. Advertising

  2. 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/
     
    Martin Honnen, Nov 4, 2004
    #2
    1. Advertising

  3. 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
     
    Daniel Kirsch, Nov 4, 2004
    #3
  4. 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/
     
    Martin Honnen, Nov 4, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Thorsten Meininger
    Replies:
    0
    Views:
    463
    Thorsten Meininger
    Jul 28, 2004
  2. Thorsten Meininger
    Replies:
    0
    Views:
    531
    Thorsten Meininger
    Jul 28, 2004
  3. mike
    Replies:
    1
    Views:
    1,297
    Martin Honnen
    Nov 20, 2004
  4. n00m
    Replies:
    12
    Views:
    1,143
  5. vamsi
    Replies:
    21
    Views:
    2,153
    Keith Thompson
    Mar 9, 2009
Loading...

Share This Page