ionic2 离子列表，带有一个按钮，都具有（单击）事件

Posted 2023-03-13

【中文标题】ionic2 离子列表，带有一个按钮，都具有（单击）事件

【英文标题】：ionic2 ion-list with a button both having (click) event

【发布时间】：2017-02-12 07:37:11

【问题描述】：

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

<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>

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

【参考方案1】：

您可以使用event.stopPropagation(); 解决此问题。

请看this plunker。

如您所见，我还将$event 对象发送给这两种方法

<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>

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

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

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

【讨论】：

你的 plunker 好像是空的？

@MichaëlPolla 是的，这个 plunker 使用的是旧版本的 Ionic。我将创建另一个并尽快更新答案。无论如何，代码中最相关的部分是您可以在答案中看到的：)

@MichaëlPolla plunker 已更新...抱歉耽搁了 :)