防止点击事件在NETHE NETHE PRANT元素下触发其他单击元素

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时，它显示了从右侧悬停的幻灯片(像汉堡菜单滑动一样思考(

这里的问题是，在"行"上触发了单击事件，但随后单击事件似乎渗入了，也单击了背景，该后台将activeThing设置为null。

如何防止单击？

或更确切地说，如何更好地解决这种情况。在这种情况下，用户仍然应该能够与其他事物进行互动，而此爆发是可见的，因此我不能只有100％x100％褪色的背景可单击的悬停。尽管这样，这件事的举止我甚至没有说服它，即使这样做会有所帮助

Answer 1

基于您当前的情况，在单击事件中调用$event.stopPropagation();。它的作用是。

事件接口的stopPropagation((方法进一步防止 捕获和冒泡阶段中当前事件的传播。

因此，不会触发父元素的单击。以下是一个工作示例。

stack Blitz demo

Answer 2

您可以通过调用事件来防止单击事件到达基础元素。StopPropagation：

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

Answer 3

最清洁最可重复使用的方法是创建一个指令，以停止单击事件的传播：

import { Directive, HostListener } from '@angular/core';
@Directive({
  selector: '[stop-propagation]'
})
export class StopPropagationDirective {
  constructor() { }
  @HostListener('click', ['$event']) onClick($event: Event) {
    $event.stopPropagation();
    return false;
  }
}

然后将此指令附加到您的活动中：

<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>