pasar - eventos navegador javascript

activadores de cierre de chip de iones, evento de botón de elemento de iones

Question

Tengo un elemento de iones como botón y dentro de él coloqué un chip de iones con un evento de eliminación de iconos cruzados. Cuando se hace clic en el botón de eliminación de chip iónico, desencadena el evento de elemento iónico, no el evento de chip iónico. Incluso event.stopPropogation no funciona.

¿Cómo puedo activar el evento de disparo por clic del chip iónico?

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

El problema no es la propagación del evento, sino que el elemento es un botón. Detrás de escena Ionic hace muchas cosas para manejar eventos desde botones, por lo que para que funcione, puedes cambiar el ion-item para que sea un elemento en lugar de un botón con el atributo ion-item . Por favor, eche un vistazo a este plunker de trabajo

Al reemplazar el <button ion-item ...></button> por un <ion-item tappable ...></ion-item> el resultado desde el punto de vista de la UI es exactamente el mismo, pero esta vez el event.preventDefault() funcionará correctamente.

Ver

 <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">&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>
</ion-item>
</ion-list>

Componente

@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 '');
}
}