How to control multiple (click) events inside a table?

Question

Hello I hope the title is descriptive enough to understand my problem,

I have this HTML code. In <td> i have attached a (click) function. Inside this <td>, I have another div which also has a (click) function attached. When I click the button inside <td> both functions are triggered. But, I would like only the (click) in div to be triggered when I click it and not the <td> (click). Is it possible to happen?

<td mat-cell align="center" *ngFor="let option of options; let opt_indx = index"
    (click)="optionsClicked(opt_indx, i);" id="defaultBadge-wrapper">

    <div *ngIf="!rowCommands[i].defaultSelected[opt_indx]" class="defaultBadge">
        <a class="badge badge-secondary" matTooltip="Click here to set this Option as Default"
            (click)="markDefault(i,option.id)">Default</a>
    </div>
</td>

Typescript code

markDefault(index, option: string) {
    alert('this function triggered');
}

optionsClicked(option, rule) {
    alert('I dont want this function to be triggered when i click markDefault');
}

Possible duplicate of [How to stop event bubbling on checkbox click](https://stackoverflow.com/questions/1164213/how-to-stop-event-bubbling-on-checkbox-click) — Amit Chigadani, Mar 04 '19 at 11:32

Abhishek Gautam · Accepted Answer · 2019-03-04T11:37:06.183

2

In ts method pass the $event as param and include

event.stopPropagation();

or in the click event pass another function:

(click)="markDefault(i,option.id); event.stopPropagation();">Default</a>

edited Mar 04 '19 at 11:37

answered Mar 04 '19 at 11:34

Abhishek Gautam

1,617
3
18
29

score 1 · Answer 2 · answered Mar 04 '19 at 11:33

1

use the stoppropagation to prevent the event from propagating

(click)="markDefault(i,option.id); event.stopPropagation();">Default</a>

answered Mar 04 '19 at 11:33

Sachila Ranawaka

39,756
7
56
80

score 1 · Answer 3 · answered Mar 04 '19 at 11:34

just add $event.stopPropagation() to inner click.

<div *ngIf="!rowCommands[i].defaultSelected[opt_indx]" class="defaultBadge">
    <a class="badge badge-secondary" matTooltip="Click here to set this Option as Default"
        (click)="$event.stopPropagation();markDefault(i,option.id)">Default</a>
</div>

How to control multiple (click) events inside a table?

3 Answers3