Prevenir eventos em elementos com elementos filhos

by gsguma

HTML

Prevenir eventos em elementos com elementos filhos:
<br />
Exemplo Errado:
<br />
<div class="pai_errado">
  Elemento Pai (Div)
  <a href="#" class="filho_errado">Elemento Filho (a)</a>  
</div>

<br />
Exemplo Correto:
<br />
<div class="pai_correto">
  Elemento Pai (Div)
  <a href="#" class="filho_correto">Elemento Filho (a)</a>
</div>

CSS

.pai_errado {background:#FF0000;padding:20px}
.pai_correto{background:#AEAEAE;padding:20px}
.clique {background:#151515;color:#FFF}

JavaScript

//Prevenir eventos em elementos com elementos filhos:
//Exemplo errado
$('.pai_errado').click(function() {
    alert('Clicou no Pai');
});
$('.filho_errado').click(function(event){
    alert('Clicou no Filho')
});

//Exemplo correto
$('.pai_correto').click(function() {
    alert('Clicou no Pai');
});

$('.filho_correto').click(function(event){
    event.stopImmediatePropagation();
    alert('Clicou no Filho')
});