title: How to prevent event (link) while the child event is fired
body: <p>I am trying to stop an event that when we click the child event it will not fire the parent event.</p>
  
  <p>Here's my code :</p>
  
  <pre><code>&lt;div class="card"&gt;
    &lt;div class="item item-divider"&gt;Choose 3 favorite player&lt;/div&gt;
      &lt;ion-item class="item-button-right" ng-repeat="player in dataService.playerlist" item="item" ng-href="#/tab/chat"&gt;{{player.name}}
        &lt;div class="buttons"&gt;
        &lt;button class="button button-assertive icon ion-android-favorite" ng-click="addToFavorite(player)"&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/ion-item&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my real case : <a href="http://codepen.io/harked/pen/WvJQWp" rel="nofollow">http://codepen.io/harked/pen/WvJQWp</a></p>
  
  <p>What i want to do is : When we click item(player), it will go to 'Player Detail pages', but when we click favorite button, it will only show alert and add player to favorites but not go to 'Player Detail pages'.</p>
  
  <p>I've already add <code>item.stopPropagation();</code> or <code>event.stopPropagation();</code>
  but still didnt work.</p>
  
  <p>Any advice?
  It would be greatly appreciated.</p>