离子芯片关闭触发器,离子项按钮事件 [英] ion-chip close triggers, ion-item button event
问题描述
我有一个离子项作为按钮,在里面我放置了一个带有十字图标删除事件的离子芯片。单击离子芯片删除按钮时,会触发离子项事件而不是离子芯片事件。甚至 event.stopPropogation
也无效。
I have a ion-item as a button and inside it I placed an ion-chip with a cross icon delete event. When ion-chip delete button is clicked, it triggers the ion-item event not ion-chip event. Even event.stopPropogation
is not working.
如何触发离子芯片onclick触发事件?
How can I trigger the ion-chip onclick trigger event?
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"> {{ 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
}
推荐答案
问题不是事件的传播,而是项目是一个按钮。在幕后,Ionic会处理很多事情来处理来自按钮的事件,所以为了使它能够正常工作,您可以将 ion-item
更改为项目而不是具有属性 ion-item
的按钮。请查看 此工作的plunker
The issue is not the propagation of the event, but the item being a button. Behind the scenes Ionic makes a lot of things to handle events from buttons, so in order to make it work, you can change the ion-item
to be an item instead of a button with the attribute ion-item
. Please take a look at this working plunker
将< button ion-item ...>< / button>
替换为< ion-item tappable ...>< / ion-item>
从UI的角度来看结果完全一样,但这次 event.preventDefault()
将正常运作。
By replacing the <button ion-item ...></button>
by a <ion-item tappable ...></ion-item>
the result from the UI point of view is exactly the same, but this time the event.preventDefault()
will work properly.
查看
<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 ');
}
}
这篇关于离子芯片关闭触发器,离子项按钮事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!