Javascript 输入'；触摸'；在角度验证中，是阻塞方法执行

我注意到在使用这种验证时：

<label>Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': f.password.touched && f.password.errors }" />

  <div *ngIf="f.password.touched && f.password.errors" class="invalid-feedback">
    <div *ngIf="f.password.errors.required">Password is required</div>
    <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
  </div>
<div class="form-group">
  <button class="btn btn-primary" (click)="alertX()">sdf</button>
</div>

密码
密码是必需的
密码必须至少为6个字符
自卫队

当我聚焦输入，然后单击按钮时，“alertX（）”方法不会执行我认为这是因为输入的状态在alertX（）之前更改为toucted=true，（这种情况有时并不总是发生，但对UX来说有点烦人）任何关于如何避免这种行为的建议都将得到赞赏。。。

根据：

在中，在mousedown和mouseup事件均已激发后单击激发 那个命令

在您的示例中，单击按钮会导致

鼠标向下移动

。这将立即触发验证，并且输入下存在错误

这会将按钮向下移动一点，

mouseup

不再位于按钮上！因此，单击事件不会触发，因为您没有在按钮上单击鼠标

解决方法：

  <button class="btn btn-primary" id="btnSubmit" (mousedown)="alertX()">Register</button>

寄存器

在鼠标按下时注册EventListener，而不是要触发的“单击”事件

---

请分享Stackblitz链接。我在你的截图中看到你有一个StackBlitz。我创建了一个StackBlitz，它每次都有效。你能在这个例子中重现它吗？我试过你的stackblitz但还是发生了。。。我不知道你怎么能复制它，奇怪。。我重读了你的问题，意识到情况确实如此。在下面添加了一个答案。