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

Question

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

无效时，我具有反应式表单控件，其中包含同步验证器和错误消息，显示在字段下方。

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

我已经用评论更新了演示。注意：仅输入下方的按钮会重现该问题。首次单击后，标题将不会更新。

Answer 1

该问题似乎与 DOM 事件触发顺序有关

根据MDN：

当在单个元素上按下并释放定点设备按钮（通常是鼠标的主按钮）时，将触发 click 事件。

https://developer.mozilla.org/en-US/docs/Web/Events/click

在给定的示例中，元素在您blur输入时就会移动 - 因为验证会立即发生，显示错误并重新定位按钮。

因此，当鼠标悬停在按钮上时，鼠标处于向下状态，但当鼠标向上时，按钮会重新定位。所以click 不会在按钮上触发

有几种解决方法：

• 延迟时mousedown错误显示
• 隐藏错误，直到mousedown和 都mouseup发生（如果mousedown发生在按钮上）
• ETC

mousedown这是事件处理 的示例https://jsfiddle.net/gjbgqqpo/

希望这可以帮助 ：）