Блог

У меня есть вложенная структура div. Основная ширина div 100% имеет одно контекстное меню. Дочерний раздел шириной 25% имеет одно контекстное меню. Когда я нажимаю дочерний div, оба контекстных меню открываются. как ограничить родительское меню? кто-нибудь может помочь

  <div class="icon-td" (contextmenu)="sheetMenu($event);">
        <button mat-icon-button  
          (click)="hideChild(lineitem)">
          <mat-icon class="mat-icon-rtl-mirror">
            {{lineitem.display ? 'expand_less' : 'chevron_right'}}
          </mat-icon>
        </button>
        <div >
          <mat-icon class="note-icon">sticky_note_2_outline</mat-icon>
        </div>
        <mat-form-field floatLabel="never" class="line-item-field"  (contextmenu)="lineItemMenu($event);">
          <input [style.marginLeft.px]="lineitem.level * 16" matInput
           [value]="lineitem.lineItem" [id]="'line_' lineitem.id">
        </mat-form-field>
      </div>
 

Ожидается, что откроется только lineItemMenu. но оба sheetMenu и lineItemMenu открываются.

Вы должны добавить event.stopPropagation(); в метод lineItemMenu .