Question

我使用的是Ionic 4，我下达了指令，以防止在某些情况下点击组件。

  @Directive({
      selector: '[appDisable]'
  })
  export class DisableDirective {

      @Input() ifTruthy: boolean = false;

      @HostListener('click', ['$event']) clickEvent(event: Event): boolean {
      if (this.ifTruthy) {
          console.log('Preventing click');
          console.log('This should prevent further clicks from happening?');
          event.preventDefault();
          event.stopPropagation();
          return false;
      }

      return true;
      }

      constructor(
      private element: ElementRef,
      protected renderer: Renderer2) {
      }
  }

然后点击我的按钮

<ion-button appDisable [ifTruthy]="1 === 1" (click)="presentAlert()">Disabled</ion-button>

这不起作用，如果我将click（）移到上一个元素（由于stopPropagation），它会起作用，我想知道为什么它不起作用。

我做了一个stackBlitzz

感谢您的帮助。

Answer 1

尝试在函数顶部键入event.preventDefault();。有时为时已晚，软件已经完成了该活动。

Answer 2

您可以在事件捕获阶段停止传播以防止执行 ionic 的处理程序。

事件预防离子按钮上的默认单击不起作用

2 个答案: