javascript - How to prevent event (link) while the child event is fired -

i trying stop event when click child event not fire parent event.

here's code :

<div class="card">   <div class="item item-divider">choose 3 favorite player</div>     <ion-item class="item-button-right" ng-repeat="player in dataservice.playerlist" item="item" ng-href="#/tab/chat">{{player.name}}       <div class="buttons">       <button class="button button-assertive icon ion-android-favorite" ng-click="addtofavorite(player)"></button>       </div>     </ion-item> </div> 

here's real case : http://codepen.io/harked/pen/wvjqwp

what want : when click item(player), go 'player detail pages', when click favorite button, show alert , add player favorites not go 'player detail pages'.

i've add item.stoppropagation(); or event.stoppropagation(); still didnt work.

any advice? appreciated.

the item not event, in case. want use event.preventdefault() well, believe. event ng-click need add $event arguments following bit of code (from example):

<button class="[...]" ng-click="addtofavorite($event, player)"></button> 

then in handler add $event , use preventdefault():

$scope.addtofavorite = function ($event, item) {   alert("one player added succesfully!");   user.favorites.unshift(dataservice.playerlist.indexof(item));   $event.preventdefault(); } 

updated codepen