Problema com click no elemento

[Wellington09 1]

O codigo do exemplo está no link abaixo,

http://jsfiddle.net/2BQvr/

Quando eu clico em MENU 1.

Aparece o alerta "menu1"

Quando eu clico em submenu a do MENU 1.

Aparece o alerta "submenu" e logo em seguida "menu1 ativado"

A pergunta é:

Pq ele entra novamente na função ?

Tipo...se eu clicar no submenu b do MENU 1

Vai aparece o alerta "submenu" e logo em seguida "submenu ativado" e logo em seguida novamente "menu1 ativado"

Pq isso acontece ?

Acredito que o fato da tag LI estar envolvendo outras tags, ao dar um click sobre submenu b, o javascript está pegando o click de <li class="menu1">MENU 1, <li class="submenu">submenu a e de <li>submenu b</li>

        <li class="menu1">MENU 1
            <ul>
                <li class="submenu">submenu a
                    <ul>
                        <li>submenu b</li>    
                    </ul>
                </li>
            </ul>
        </li>

 

 

[André Cristopher 4]

É exatamente porque a tag LI está envolvendo outras tags que está acontecendo isto.

 

Tente colocar um stopPropagation para evitar o problema, a função ficaria assim:

function ativaMenu(e){ // é necessário receber o parâmetro evento
	alert(this.className);
	this.classList.add('ativado');
	e.stopPropagation(); /* interrompe a propagação do evento */
}

[Wellington09 1]

Vlw Andre o stopPropagation vai a judar e muito

[Wellington09 1]

Reparei uma coisinha com o stopPropagation:

 

Seguindo o mesmo exemplo de http://jsfiddle.net/2BQvr/

 

Quando eu tenho dentro de uma lista:

       <li class="menu2">
            <input id="texto" type="checkbox">
            <label for="texto">wellington</label>

Ao clicar na LABEL, ele ira marcar a checkbox, pelo fato do atributo FOR ter o mesmo nome do atributo ID da input, porém mesmo com o stopPropagation, o navegador vai entender como um click na LABEL e um click na INPUT.

Alguem ja passou por isso ?