angular - ion-chip 关闭触发器、ion-item 按钮事件

Question

我有一个 ionic 项目作为按钮，在其中放置了一个带有十字图标删除事件的 ionic 芯片。单击 ion-chip 删除按钮时，会触发 ion-item 事件而不是 ion-chip 事件。甚至 event.stopPropogation 也不起作用。

如何触发 ion-chip 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

通过替换 <button ion-item ...></button>通过<ion-item tappable ...></ion-item>从 UI Angular 来看的结果是完全相同的，但是这次 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 ');
  }

}