Как избежать, чтобы щелчок внутри заголовка таблицы вызывал щелчок по всему заголовку таблицы - PullRequest
Новая
       13

Как избежать, чтобы щелчок внутри заголовка таблицы вызывал щелчок по всему заголовку таблицы

0 голосов
/ 21 мая 2019

У меня есть следующие заголовки таблиц (столбцы), которые позволяют сортировать и редактировать

enter image description here

При нажатии на заголовок таблицы сортировка изменится, поэтому ядобавил это 

(click) = "changeToNextSortOption(header)"

Но есть также функция щелчка по имени заголовка таблицы, чтобы отредактировать его, и для этого я добавил это 

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

Но когда щелкнул заголовок столбцаИнициируется событие click для заголовка таблицы.

Мне нужно убедиться, что, если щелчок по названию заголовка сработал, другой не сработает (так как он изменитпорядок таблицы), пожалуйста, покажите мне, как это сделать.

Вот часть 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>

1 Ответ

1 голос
/ 21 мая 2019

Вы должны использовать 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(); дополнительно таким же образом.

...