angular - 移动目标元素时不会触发点击处理程序

Question

考虑以下演示 https://stackblitz.com/edit/angular-pur1dt

我有带有同步验证器的响应式(Reactive)表单控件，当它失效时，错误消息显示在字段下方。

当控件失去焦点时触发验证。在控件下方有一个带有点击处理程序的按钮。问题是，当我单击按钮时，控件失去焦点，进行验证，显示错误消息并将按钮向下移动。据推测，这会阻止点击处理程序的执行。为什么会发生这种情况以及如何解决问题有什么建议吗？

我已经用评论更新了演示。注意:只有输入下方的按钮会重现该问题。第一次点击后标题不会更新。

Answer 1

问题在 issue #7113 中讨论过在 GitHub 上。这是因为当输入字段失去焦点时，在按钮的点击有机会完成并触发 click 事件之前执行验证。

一种可能的解决方法是在单击按钮时使用标志来隐藏消息，如 this stackblitz 所示。 .在下面的代码中，isClicking 标志在 mousedown 事件开始点击时设置，并在 click 事件完成时重置。

<p #errorMsg [hidden]="(errorMsg.hidden && isClicking) || form.controls.name.valid || form.controls.name.untouched ">
    Invalid :)
</p>
<button (mousedown)="onMouseDown($event)" (click)="onClick2($event)">click NOT ok</button>

export class AppComponent {

  isClicking = false;
  ...

  onMouseDown(event) {
    this.isClicking = true;
    setTimeout(() => {
      // The click action began but was not completed after two seconds
      this.isClicking = false;
    }, 2000);
  }

  onClick2(event) {
    console.log(event);
    this.name = "NOT";
    this.isClicking = false;
  }
}

您可以改进该解决方案，方法是将 setTimeout 替换为在 mousedown 事件处理程序中捕获鼠标的过程，并在以下情况下重置 isClicking捕获丢失了。它将解释用户在未完成点击的情况下离开按钮的情况。