離子芯片關閉觸發器，離子項按鈕事件

Question

我有一個離子項目作爲一個按鈕，並在裏面我放置了離子芯片與十字圖標刪除事件。點擊離子芯片刪除按鈕時，它會觸發離子項目事件而不是離子芯片事件。即使event.stopPropogation不起作用。

如何觸發離子芯片onclick觸發事件？

activity.html

<ion-content> 
    <ion-list> 
    <button ion-item style="color: #999" (click)="addProject()"> 
     <span *ngIf="selected_project == null">Project</span> 
     <div *ngIf="selected_project != null"> 
     <ion-chip color="primary"> 
      <span style="margin-left: 10px"><i class="fa fa-book">&nbsp;{{ selected_project.name }}</i></span> 
      <button ion-button clear color="light" (click)="deleteProject($event)"> 
      <ion-icon name="close-circle"></ion-icon> 
      </button> 
     </ion-chip> 
     </div> 
     <ion-icon name="add" item-right></ion-icon> 
    </button> 
    </ion-list> 
<ion-content> 

activity.ts

addProject(){ 
    //some code 
} 

deleteProject(event){ 
    event.stopPropagation(); //not working 
} 

Answer 1

的問題不是事件的傳播，但該項目是一個按鈕。在幕後，Ionic使得很多事情能夠處理來自按鈕的事件，所以爲了使其工作，您可以將ion-item更改爲項目，而不是具有屬性ion-item的按鈕。請看看this working plunker

通過從視UI點由<ion-item tappable ...></ion-item>更換<button ion-item ...></button>結果是完全一樣的，但這次event.preventDefault()將正常工作。

查看

<ion-list> 
    <ion-item tappable style="color: #999; cursor:pointer;" (click)="addProject($event)"> 
     <span *ngIf="selected_project == null">Project</span> 
     <div *ngIf="selected_project != null"> 
     <ion-chip color="primary"> 
      <span style="margin-left: 10px"><i class="fa fa-book">&nbsp;{{ selected_project.name }}</i></span> 
      <button ion-button clear color="light" (click)="deleteProject($event)"> 
      <ion-icon name="close-circle"></ion-icon> 
      </button> 
     </ion-chip> 
     </div> 
     <ion-icon name="add" item-right></ion-icon> 
    </ion-item> 
    </ion-list> 

組件

@Component({...}) 
export class HomePage { 

    public selected_project = { name: 'DemoProject'} 

    constructor() {} 

    public addProject(event) { 
    event.stopPropagation(); 
    alert('Add project'); 
    } 

    public deleteProject(event) { 
    event.stopPropagation(); 
    alert('Delete project '); 
    } 

}