Clickable ion-item with clickable ion-icon inside

Ionic Framework
1

Hi all,
I did not manage to find a proper answer to this issue.
Actually it is working, but clicking on the icon also clicks the item itself.
I would like to create a list of clickable items and at the “end” slot to have an icon which toggles a different function.
Currently I solved it my making the clickable instead of the item itself.
But it would be way better to isolate each of the clicks, when the item itself is clickable.
Thank you!

1 Like
2

If you have one clickable item within another clickable item, you’ll need to stop the propagation of the click from that item to it’s parent:

Say you have this:

<div (click)="one()">
  <p>Some text...</p>
  <div (click)="two()">
</div>

You would change this line:

<div (click)="two()">

to this:

<div (click)="two($event)">

And then in your event handler within your component:

two(event) {
   event.stopPropagation();
}

This will cause the click handler for the parent (i.e. one()) from firing.

1 Like
3

Thank you very much, @nvahalik ! :slight_smile:

For some reason it still fires in my code:

<ion-list>
  <ng-container *ngFor="let item of channels">
    <ion-item [routerLink]="['/', 'schedule', item.id, 'date']">
      <ion-avatar slot="start">
        <img src="{{item.logo}}">
      </ion-avatar>
      <ion-label>{{ item.title }}</ion-label>
      <ion-buttons slot="end">
        <ion-button (click)="favoriteChannel($event, item.id)">
          <ion-icon slot="icon-only" name="star-outline"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-item>
  </ng-container>
</ion-list>

favoriteChannel(event: Event, variable1: any) {
    event.stopPropagation();
    this.favoriteService.favoriteChannel(variable1).then(() => {
      this.isFavorite = true;
    });
  }

Can you see anything wrong in my code?

4

Actually, you mind need to do one or more of the following:

event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
3 Likes
5

You are right!! I added event.preventDefault(); and it worked!!
Thanks a lot @nvahalik , you rock!
And Ionic is awesome! I wish you and the Ionic team all the best!

1 Like
6

Just responding to remember myself:
If you have an ion-item with a checkbox in it, and want a (separately) clickable icon, even event.preventdefault won’t help you, because the checkbox somehow takes over the entire ion-item

image

my solution #worksforme was to add z-index to the icon to make sure it sits “on top” of the other stuff (in addition to stopping event propagaton):
<ion-icon style=“z-index: 2;” slot=“end” name=“help-circle-outline” (click)="…

2 Likes
7

event.preventDefault(); not worked for me, but z-index did it… thank you bro :pray: …

8

Thanks a lot! You saved my day.