Making an icon clickable inside an anchor tag

Question

I made a whole li element clickable by making use of anchor tag as such:

 <li *ngIf="notification.payload.table">
      <a class="d-flex justify-content-between" (click)="updateTableNotificationReadStatus(notification)">
        <div class="d-flex flex-column">
          <span style="font-size: 1.1rem">
            <strong>{{notification.payload.username}}</strong> requested access for table - {{notification.payload.table}}.
              <span style="font-size: 0.9rem">{{notification.payload.time}}</span>
          </span>
          <span *ngIf="notification.payload.note"class="note">
            <span class="noteLabel">Note</span>
            <span> This is a note attached to it</span>
          </span>
        </div>
        <span>
          <fa-icon [icon]="faClose" class="ml-auto" (click)="deleteNotification(notification)"></fa-icon>
        </span>
      </a>
    </li>

When I click on the fa-icon, the notification is getting deleted but I am also getting redirected to another page because of the function in which I doesn't want?

How can I make the close icon clickable without getting redirected while being on the same element?

On first look seems like the issue is that you are missing preventDefault() somewhere in your Function? Can you doublecheck that first?Also maybe paste some of your function code for more troubleshooting. — yavor.vasilev, Sep 25 '18 at 12:51
I think that 9999999999999 is to low. Try setting z-index to 9999999999999999999999999999999999999 — Christian Vincenzo Traina, Sep 25 '18 at 12:52
Besides jokes, you can understand more about how event propagation happens reading an article about [bubbling and capturing](https://javascript.info/bubbling-and-capturing) — Christian Vincenzo Traina, Sep 25 '18 at 12:53
Lol. just use event.stopPropogation instead of messing with z-index. Z-index will only fix the styling issue, not event-based issues like you're having. — kumarharsh, Sep 25 '18 at 12:53
How to use that event.stopPropogation in this scenerio. Can you please guide? — s4tr2, Sep 25 '18 at 12:55
Listen to the click event on your icon and prevent the default action of the link. `document.querySelector("a fa-icon").addEventListener("click", event => event.preventDefault());` — Kulvar, Sep 25 '18 at 13:19

score 2 · Answer 1 · answered Sep 25 '18 at 12:50

2

It seems to me that you need something similar to this question AngularJS ng-click stopPropagation

To stop propagating the event

$event.stopPropagation();

answered Sep 25 '18 at 12:50

Grissom

1,080
8
21

event.preventDefault() seems more suited. Following a link href is the default action of a link. Stopping propagation wouldn't prevent it and could also break other listeners. – Kulvar Sep 25 '18 at 13:17
@Kulvar A far as I understood, the problem is that when user click on `fa-icon` which calls `deleteNotification(notification)`, it his case, that method is called but also the parent on click has been triggered on `a` element, so in that case propagation of event should be stopped, as far as I know `fa-icon` doesn't have default behavior on click, so nothing to prevent :) – Grissom Sep 25 '18 at 14:57

score 1 · Accepted Answer · answered Sep 28 '18 at 10:31

1

I achieved that using:

 deleteNotification(e, notification) {
    e.stopPropagation();
  }

answered Sep 28 '18 at 10:31

s4tr2

415
1
9
27

Making an icon clickable inside an anchor tag

2 Answers2