ionic2离子列表，按钮都有（点击）事件 [英] ionic2 ion-list with a button both having (click) event

问题描述

我想要实现的是当我点击下载按钮时它应该做其他事情，当点击该项目时应该打开一个新窗口

What I am trying to achieve is when I click on the download button it should do somthing else and when clicking on the item it should open a new window

<ion-list>
    <ion-item *ngFor="let reading_material of reading_materials" (click)="gotoReadingMaterial(reading_material)">
        {{reading_material.title}}
        <ion-icon item-right name="download" (click)="downloadMaterial(reading_material)"></ion-icon>
    </ion-item>
</ion-list>

但是当我点击下载按钮时，两个事件都会被点击。
当我点击下载按钮时，有没有办法可以抑制项目事件？

But when I click on the download button, both the events gets hit. Is there a way i can suppress the item event when i click on the download button ??

推荐答案

你可以使用 event.stopPropagation（）; 解决此问题。

You can solve this issue by using event.stopPropagation();.

请看一下这个plunker 。

就像你在那里看到的一样，我还将 $ event 对象发送到两个方法

like you can see there, I also send the $event object to both methods

<ion-list>
    <ion-item *ngFor="let item of items" (click)="open($event, item)">
        {{ item }}
        <ion-icon (click)="download($event, item)" item-right name="download"></ion-icon>
    </ion-item>
</ion-list>

然后我使用该信息来阻止事件的传播，因此只有下载方法才会单击下载图标时执行

And then I use that information to stop the propagation of the event, so only the download method will be executed when clicking the download icon

  public open(event, item) {
    event.stopPropagation();
    alert('Open ' + item);
  }

  public download(event, item) {
    event.stopPropagation();
    alert('Download ' + item);
  }

这篇关于ionic2离子列表，按钮都有（点击）事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！