Javascript вложенный список CSS

Question

У меня есть список ниже:

<ul> 
    <li> 
     <a>Link1</a> 
     <ul> 
     <li> 
      <a>SubLink1</a> 
     </li> 
     ... 
     </ul> 
    </li> 
    <li> 
     <a>Link2</a> 
    </li> 
    ... 
</ul> 

И хотел бы добавить 'css_class' к текущему mouseovered <li> элемент:

document.getElements('li').addEvents({ 
      mouseover: function(){  
       this.addClass('css_class'); 
      }, 
      mouseout: function(){ 
       this.removeClass('css_class'); 
      } 
}); 

Но этот код не так, как мой родитель <li> также имеет 'css_class'. Как я могу это исправить? Спасибо.

Answer 1

Вы должны stopPropagation(), чтобы предотвратить событие от бурлит дерева слушателя:

document.getElements('li').addEvents({ 
    mouseover: function(e){ 
    this.addClass('css_class'); 
    e.stopPropagation(); 
    }, 
    mouseout: function(){ 
    this.removeClass('css_class'); 
    e.stopPropagation(); 
    } 
});