离子按钮单击上的事件 preventDefault 不起作用答案

【问题标题】：Event preventDefault on ion-button click not working离子按钮单击上的事件 preventDefault 不起作用
【发布时间】：2019-02-01 10:04:09
【问题描述】：

我正在使用 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

感谢任何帮助。

【问题讨论】：

经过很长时间我遇到了这个post，它解决了这个问题。

标签： angular ionic-framework angular-directive ionic4

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

如果你在每个方法上添加一个console.log，你会看到@HostListener方法首先执行，而且javascript中没有竞争条件