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。我相信你也想使用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

Answer 2

您需要将$ event对象传递给ng-click函数回调，并使用$ event.stopPropagation（）方法停止将click事件传播到父级。

以下是HTML代码调整：

void *

这是您在ChooseTabCtrl控制器中的JS代码调整：

<div class="buttons"> 
  <button class="button button-assertive icon ion-android-favorite" ng-click="addToFavorite(player, $event)"></button>
</div>

此致

如何在触发子事件时阻止事件（链接）

2 个答案: