如何防止事件（链接），而儿童事件被触发

我想停止一个事件，当我们点击子事件时它不会触发父事件。如何防止事件（链接），而儿童事件被触发

这里是我的代码：

<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(); 但仍然没有工作。

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

来源

2015-07-10 Harkedian

在这种情况下，item不是event。我相信你也想用event.preventDefault()。要获得从事件NG点击你需要将$事件添加到像下面的代码位的参数（从你的例子）：

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

然后在你的处理程序中添加$事件并使用preventDefault()：

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

Updated codepen

来源

2015-07-10 08:56:48

太好了！它的工作原理.. 感谢您的解释，@Erik Lundgren。 – Harkedian

你需要通过$事件对象的NG-点击回调函数，并使用$ event.stopPropagation（）方法来阻止点击事件父的传播。

下面是HTML代码调整：

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

这是你的ChooseTabCtrl控制器内的JS代码调整：

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

问候，

来源

2015-07-10 09:33:07

Hi @Javier。感谢您的评论。最后我使用$ event.preventDefault（）;而不是$ event.stopPropagation（）;因为它适用于我的代码。谢谢。 – Harkedian

如何防止事件（链接），而儿童事件被触发

回答

相关问题