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

Question

рассмотрим следующую структуру

<div (click)="setThing(null)">

   <table>
       <tr *ngFor="let item of items"  (click)="setThing(item)">
            <td>{{item.whatever}}</td>
            <td>{{item.whocares}}</td>
       </tr>
   </table>


  <div id="slidein" *ngIf="activeThing">
       {{ activeThing.whatver }}
  </div>
</div>

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

Проблема здесь в том, что событие click в строке определенно срабатывает, но затемсобытие щелчка, кажется, просачивается, а также щелкает фон, который устанавливает activeThing в ноль.

Как мне предотвратить клик до конца?

или, точнее, как лучше подходить к этому сценарию.В этой ситуации предполагается, что пользователь по-прежнему сможет взаимодействовать с другими вещами, пока это всплывающее окно является видимым, поэтому я не могу просто использовать кликабельный всплывающий фон со 100% х 100%.Хотя так все это ведет себя, я не уверен, что даже это помогло бы

Answer 1

Исходя из вашего текущего сценария, целесообразно вызвать $event.stopPropagation(); внутри события click.

Метод stopPropagation () интерфейса Event предотвращает дальнейшее распространение текущего события в фазах захвата и всплытия.

Итак, щелчокродительского элемента не сработает.Ниже приведен рабочий пример.

Stack Blitz Demo

Answer 2

Вы можете предотвратить достижение события click базовых элементов, вызвав Event.stopPropagation :

(click)="setThing(item); $event.stopPropagation()"

Answer 3

Самый чистый и многократно используемый способ - создать директиву, которая останавливает распространение события click:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[stop-propagation]'
})
export class StopPropagationDirective {

  constructor() { }

  @HostListener('click', ['$event']) onClick($event: Event) {
    $event.stopPropagation();
    return false;
  }

}

, а затем присоединить эту директиву к вашему activeThing:

<div (click)="setThing(null)">

   <table>
       <tr *ngFor="let item of items" stop-propagation (click)="setThing(item)">
            <td>{{item.whatever}}</td>
            <td>{{item.whocares}}</td>
       </tr>
   </table>


  <div id="slidein" *ngIf="activeThing">
       {{ activeThing.whatver }}
  </div>
</div>