2015-07-10 118 views
2

我想停止一個事件,當我們點擊子事件時它不會觸發父事件。如何防止事件(鏈接),而兒童事件被觸發

這裏是我的代碼:

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

有什麼建議嗎? 這將不勝感激。

回答

2

在這種情況下,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

+0

太好了!它的工作原理.. 感謝您的解釋,@Erik Lundgren。 – Harkedian

0

你需要通過$事件對象的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(); 
    } 

問候,

+0

Hi @Javier。感謝您的評論。最後我使用$ event.preventDefault();而不是$ event.stopPropagation();因爲它適用於我的代碼。謝謝。 – Harkedian

相關問題