2

Tenho duas div. Estou tentando fazer o seguinte. Quando eu clicar na div pai ele deve retornar o alert. Mas quando eu clicar na div filho nada deve acontecer. Tentei algo abaixo, mas não tive sucesso.

Eu sei que não funcionou porque ele está chamando dois eventos, o da div pai, e o da div filho. Mas não sei como impedir que ele não chame o evento da div pai ao clicar na div filho.

Exeste alguma forma simples de fazer isso com jQuery?

$('.pai, .filho').click(function(){
  
   if($(this).attr('class') == 'pai') { 
     alert('teste');
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="pai">
  Pai
  <div class="filho">Filho</div>
</div>

1 Resposta 1

4

Se bem percebi quer que o evento não propague para o filho mas que dispare ao clicar no pai (clicar em qualquer sitio do pai excepto no filho). Tem de dar um e.stopPropagation(); ao filho também no evento click:

$(".pai").on('click', function(){
    alert('teste');
});
$(".filho").on('click', function(e) {
   e.stopPropagation();
   console.log('não vou fazer nada');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="pai">
  Pai
  <div class="filho">Filho</div>
</div>

2
  • Opa! era exatamente isso que eu estava procurando. Valeu! ;)
    – alan
    26/08/2016 às 17:16
  • Ainda bem que resolveu @alan. De nada
    – Miguel
    26/08/2016 às 17:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .