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

将<button ion-item ...></button>替换为<ion-item tappable ...></ion-item>，从UI的角度来看结果完全相同，但这次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"> {{ 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 '); } }

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

1 个答案: