javascript - 如何在触发子事件时阻止事件(链接)

Question

我试图停止一个事件，当我们点击子事件时它不会触发父事件。

这是我的代码:

<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>

这是我的真实案例:http://codepen.io/harked/pen/WvJQWp

我想做的是:当我们点击项目(播放器)时，它将转到“播放器详细信息页面”，但是当我们单击收藏按钮时，它只会显示警报并将播放器添加到收藏夹但不会转到“播放器详细信息页面”。

我已经添加了 item.stopPropagation(); 或 event.stopPropagation();但还是没用。

有什么建议吗？将不胜感激。

Answer 1

在这种情况下，item 不是事件。我相信您也想使用 event.preventDefault()。要从 ng-click 获取事件，您需要将 $event 添加到参数中，例如以下代码(来自您的示例):

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

然后在您的处理程序中添加 $event 并使用 preventDefault():

$scope.addToFavorite = function ($event, item) {
  alert("One Player Added Succesfully!");
  User.favorites.unshift(dataService.playerlist.indexOf(item));
  $event.preventDefault();
}

Updated codepen