Смена флажка внутри div вызывает метод родительского щелчка. Как ограничить первоначальный доступ к родительскому методу?

Question

Внутри mycomponent.html

<div id="parent" (click)="tempParent($event)">
    <div class="checkbox margin-top-0  checkbox-primary">
        <input id="indChk2" type="checkbox" id="child"  (change)="tempchild($event);">
        <label>
        </label>
    </div>
</div>

Внутри mycomponent.ts

tempChild = (e: any) => {
        e.stopPropagation();

    }
    tempParent = (e: any) => {
      alert('i am parent')
        console.log('navigated1');

    } 

Как только я нажимаю флажок, он вызывает родительский метод. Я попытался использовать остановку в событии флажка, ноСначала он вызывает родителя. Может ли кто-нибудь помочь мне с этим

Answer 1

Вы говорите, чтобы отменить действие щелчка, но вы останавливаете распространение события изменения.Лучше всего просто проверить, что нажали и посмотреть, является ли это вход.

function tempParent(event) {
   if (event.target.closest('.checkbox-primary')) {
     return
   }
   
   console.log("here");
}

<div id="parent" onclick="tempParent(event)">
  <div class="checkbox margin-top-0 checkbox-primary">
    <input id="indChk2" type="checkbox" id="child" >
    <label for="indChk2" >FOO</label>
  </div>
  <p>BAR</p>
</div>