如何避免在表头内部单击并触发整个表头的单击

Question

我有以下表格标题（列），可以进行排序和编辑

当点击表格标题时，排序将发生变化，所以我添加了这个

(click) = "changeToNextSortOption(header)"

但是还有功能可以单击表标题名称来对其进行编辑，为此我添加了此功能

(click)="editColumn(header.id, i, $event)"

但是当点击列标题时，表标题上的click事件也会触发。

我需要确保如果触发了标题名称的单击，则不会触发另一个（因为这将更改表的顺序），请教我如何操作。 < / p>

这是组件HTML部分

<th
  [ngClass]="{ disabledTable: mutipleSelect }"
  *ngFor="let header of table.headers; let i = index"
  id="header{{ header.id }}"
  class="type{{ header.type }} ic-dgd handle"
  (mouseenter)="drgIcon = i; showDrgIcon = !showDrgIcon"
  (mouseleave)="drgIcon = -1; showDrgIcon = !showDrgIcon"
  [attr.data-id]="header.id"
  (click) = "changeToNextSortOption(header)"
>
  <i
    *ngIf="this.drgIcon == i && !creating && showDrgIcon == true"
    class="icon-collapseIn-Copy float-left"
  ></i>
  <i *ngIf="isSortDescending(header)" class="material-icons"
    >keyboard_arrow_down</i
  >
  <i *ngIf="isSortNone(header)" class="material-icons">remove</i>
  <i *ngIf="isSortAscending(header)" class="material-icons"
    >keyboard_arrow_up</i
  >
  <span
    (click)="editColumn(header.id, i, $event)"
    title="{{ header.title }}"
    >{{ header.title
    }}<i *ngIf="canEditTable" class="icon-edit-nocircle"></i
  ></span>
</th>

Answer 1

您应该在孩子的可点击元素中使用event.stopPropagation()。

这意味着您可以像这样在.ts文件中添加它：

editColumn(id: number, i: number, event) {
  event.stopPropagation();
  ...
}

OR

您可以像这样在模板中的处理程序后添加; $event.stopPropagation()代码：

...
<span
    (click)="editColumn(header.id, i, $event); $event.stopPropagation()"
    title="{{ header.title }}"
    >{{ header.title
    }}<i *ngIf="canEditTable" class="icon-edit-nocircle"></i
  ></span>
...

P.S .：在某些情况下，您还需要以相同的方式另外添加$event.preventDefault();。