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