Prevenindo a execução de ng-click aninhados no Angular.js

image_pdfimage_print

Uma característica de alguns tipos de eventos no javascript é a propagação do mesmo dos elementos filhos para os pais. Alguns conhecem pelo termo efeito bubbling.

E para prevenir no Angular.js que seja propagado o evento de um elemento com ng-click filho para o ng-click do pai, basta adicionar o $event.stopPropagation().

Abaixo um exemplo de um html com Angular.js em que se clicado, o elemento filho iria executar sua ação definida no ng-click, assim como seu pai.

<a ng-click="fn1()">
    <button class="special-button" ng-click="fn2()">Teste</button>
</a>

Ao clicar no link, apenas a função fn1 seria executada.
Ao clicar no botão, a função fn2 seria executada e em seguida af função fn1 seria execucada.

Caso queira prevenir este comportamento e ter apenas a função correspondente ao elemento clicado executada, basta adicionar $event.stopPropagation() após as funções no ng-click, ou passar $event como argumento da função e dentro da função, executar o $event.stopPropagation().
Iremos demonstrar abaixo como fazer uma das formas sugeridas.

<a ng-click="fn1()">
    <button class="special-button" ng-click="fn2();$event.stopPropagation()">Teste</button>
</a>
Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!