Topic: [Javascript+LowPro]MouseEvent on elements inside each other

I m just beginning to use Javascript with Prototype and Lowpro, and I have a small problem. In my html file I have this code :

<div class="component">
root
  <div class="component">
    node
    <div class="component">
     leaf
    </div>
  </div>
</div>

You can see that similar classes are inside each other to create a tree.
And i would like to be able to add "selected" in the classes name when i click on one div.component, and also that when the mouse flies over they changed color. So I did that :
    Event.addBehavior({
    '.component' : function(){
       
        this.observe('mouseover', function(){
            if (!this.classNames().include('selected'))
                {
                this.setStyle({backgroundColor: '#900'});
                }   
        });
       
        this.observe('mouseout', function(){
            if (!this.classNames().include('selected'))
                {
                this.setStyle({backgroundColor: '#fff'});
                }
        });
       
        this.observe('click', function(){
            if (this.classNames().include('selected'))
                {
                this.removeClassName('selected');
                this.setStyle({backgroundColor: '#900'});
                }
            else
                {
                this.addClassName('selected');
                this.setStyle({backgroundColor: '#009'});
                }
        });
    }
   
    });

But the problem is that when you click on the leaf component for example, the click event will also be heard by it's ancestors as they are inside each other. So i would like to know if there is a way to avoid that behavior and that only the element in which i click would actually be aware of that click event and not it's ancestors.(Hope that's clear...)

Thanks for your help

Re: [Javascript+LowPro]MouseEvent on elements inside each other

Event.addBehavior({
  '.component' : function(){
    this.observe('mouseover', function(){
      if (!tthis.hasClassNames('selected')) {
        this.setStyle({backgroundColor: '#900'});
      }
    });
    this.observe('mouseout', function() {
      if (!this.hasClassNames('selected')) {
        this.setStyle({backgroundColor: '#fff'});
      }
    });
  },
  '.component:click' : function(){
    if (this.hasClassName('selected')) {
        this.toggleClassName('selected');
        this.setStyle({backgroundColor: '#900'});
    }
    else{
        this.toggleClassName('selected');
        this.setStyle({backgroundColor: '#009'});
    }
  }
});

Try this... and maybe make the hover things with CSS it's a better idea...

Hope that's help!

Re: [Javascript+LowPro]MouseEvent on elements inside each other

Actually this makes my code a bit cleaner but the comportment remains. But I found a solution :

Event.addBehavior({

    'body:click' : function(event){
        var element = Event.element(event); 
        if (element.hasClassName('component'))
            {
                if (element.hasClassName('selected'))
                    {
                    element.setStyle({backgroundColor: '#900'});
                    }
                else
                    {
                    element.setStyle({backgroundColor: '#009'});
                    }
                element.toggleClassName('selected');
            }
        else
            {
                $$('.selected').each( function(element){
                    element.toggleClassName('selected');
                    element.setStyle({backgroundColor: '#fff'});
                })
            }
    },
   
    'div.component' : function(){
       
        this.observe('mouseover', function(event){
            var element = Event.element(event); 
            if (!element.hasClassName('selected'))
                {
                element.setStyle({backgroundColor: '#900'});
                }   
        });
       
        this.observe('mouseout', function(event){
            var element = Event.element(event);
            if (!element.hasClassName('selected'))
                {
                element.setStyle({backgroundColor: '#fff'});
                }
        });
    }

});


And I even added the unselect wink