Parar propagação de evento no jQuery

Bom dia pessoal!

Aí vai uma dica rápida mas que pode ser uma dor de cabeça para muita gente.

Suponha que você fez uma tabela e cada linha ao ser clicada executa uma ação, por exemplo vai para uma tela de edição. Mas na mesma linha você colocou um botão para remover que ao ser clicado vai para outra. Exemplo:

<table id="lista" class="table table-hover table-bordered">
<thead>
    <tr>
        <th>Login</th>
        <th>Nome</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr class="linha">
        <td>leandro</td>
        <td>Leandro</td>
        <td><button class="btn-remover" data-usuario="1"><i class="icon-trash"></i></button></td>
    </tr>
</tbody>
</table>

<script>
$(document).ready(function(){
    $('.linha').on('click',function(){
        alert('editar');
    });
    $('.btn-remover').on('click',function(){
        alert('remover');
    });
</script>

Mas quando você clica no botão remover, aparece remover, mas logo em seguida também aparece o editar. Pior, quando o click apenas redireciona para outra página, você vê apenas indo para a tela de edição.

Isso porque o evento “click” é propagado para todos os objetos clicados, mesmo que um esteja sobre o outro.

Solução: stopPropagation. Basta acrescentar esta linha no primeiro objeto, no nosso caso no botão remover (Não esqueça de usar o argumento “e” na definição da função):

$('.btn-remover').on('click',function(e){
    e.stopPropagation();
    alert('remover');
});

Referência:

http://api.jquery.com/event.stopPropagation/

Até a próxima!

Deixe uma resposta

This site uses Akismet to reduce spam. Learn how your comment data is processed.