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设置为null。

如何防止点击？

或更确切地说，在这种情况下更好的方法是什么。在这种情况下，用户应该仍然可以在此弹出窗口可见的情况下与其他事物进行交互，因此，我不能只是拥有100％x100％的背景可点击的褪色鼠标悬停。尽管这种方式可以使我正常工作

Answer 1

根据您当前的情况，适合在click事件中调用$event.stopPropagation();。它是做什么的。

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

因此，不会触发父元素的点击。下面是一个有效的示例。

Stack Blitz Demo

Answer 2

您可以通过调用Event.stopPropagation来阻止click事件到达基础元素：

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

防止点击事件触发前元素下方的其他点击元素

3 个答案: