angular 指令拦截器点击事件

Question

i want Directive click event cancel

@Directive({
  selector: '[shortConfirm]'
})
export class ShortConfirmDirective implements OnInit{
  @HostListener("click", ["$event"])
  public onClick(event: any): boolean {
    console.info('2222');
    event.cancelBubble=true;// ie下
    event.stopPropagation();
    return true;
  }
}

I tried event. Cancelbubble = true;

event cancel fail

Answer 1

You can try to intercept event during capture phase and cancel it.

Try this.

@Directive({
  selector: '[shortConfirm]'
})
export class ShortConfirmDirective implements OnInit {

  constructor(
    private _elementRef: ElementRef,
  ) { }

  ngOnInit() {
    fromEvent(this._elementRef.nativeElement, 'click', {
      capture: true,
    }).subscribe((e: MouseEvent) => {

      e.stopImmediatePropagation();
    });
  }
}