停止传播在角度 8 中没有按预期工作

Question

Here is the sample html layout of my component:

<div class="row align-content-start m-0">
  <div *ngFor="let child of list$ | async" class="col-12 mb-3" (click)="clickFunction(child)">
    <div class="d-flex align-items-center">
      <div class="flex-grow-1 border-left px-2 h-100 py-2">
       NAME
      </div>
      <div class="d-flex" (click)="selectDefault($event,child)" *ngIf="isEdit && child.isChecked">
    <i id="company_default" class="material-icons" [ngClass]="child.isDefault ? 'icon-success':''">flag</i>
  </div>
  <div class="custom-control custom-checkbox" *ngIf="isEdit">
    <input name="{{child.name}}" id="id_{{child.name}}" type="checkbox"
      class="custom-control-input" [(ngModel)]="child.isChecked" (change)="checkBoxSelection($event)" />
    <label class="custom-control-label" for="id_{{child.name}}">
    </label>
  </div>
</div>

Now as you can see there are three functions which are called based on events. selectDefault() it's working fine but if I choose a checkbox the checkBoxSelection() and clickFunction() are both called. On selecting a checkbox I don't want to trigger the clickFunction() . Here is the check box function:

checkBoxSelection(event: Event) {
  event.stopPropagation();
 }

Please help me to find out the issue / solution.

Answer 1

I think that you have a problem because of two different events - click and change .

Take a look here Typescript 3 Angular 7 StopPropagation and PreventDefault not working

Hope that this will help!

Answer 2

two events are happening in the background that have no correlation to one another. 1. the change of the checkbox model 2. the click on the checkbox

you can try to do something like this

<input name="{{child.name}}" id="id_{{child.name}}" type="checkbox"
      class="custom-control-input" [(ngModel)]="child.isChecked" (change)="checkBoxSelection($event)" (click)="$event.stopPropagation()"  />

Hope this helps!

Answer 3

Thanks everyone for your guidance. This resolve my issue.

<div class="custom-control custom-checkbox" *ngIf="isEdit" (click)="$event.stopPropagation()">
  <<<<checkbox here >>>>>>>
</div>