включите в div событие click, но избегайте дочерний элемент

Question

У меня эта проблема работает, но я нахожу действительно грязный код в том, как я это делаю.

Я хочу иметь возможность щелкнуть в элементе div, а затем что-то сделать, но избегать его при нажатии дочерний элемент с событием «click».

 <div fxFlex fxLayoutAlign="end center" (click)="clickDiv()">

    <button mat-icon-button (click)="preventDivAction($event)" [routerLink]="/page2">
        <mat-icon fxLayoutAlign="center center"> keyboard_backspace</mat-icon>
    </button>


    <button mat-icon-button (click)="preventDivAction($event)" [matMenuTriggerFor]="myMatMenu">
        <mat-icon> language</mat-icon>
    </button>
</div>

preventDivAction($event) {
  $event.stopPropagation();
}

Как видно из примера, есть 2 варианта, один из которых предназначен для навигации, а другой - для открытия matMenu.

Как Я сказал вам, что это «protectDivAction» работает, но я нахожу это действительно грязным, и я думаю, что это должен быть лучший способ сделать это.