离子芯片关闭触发器，离子项按钮事件

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 '); 
    } 

}