如何防止点击和模糊事件之间的竞争？

Question

我的 Angular 代码看起来像这样 >

<input type='text' (blur)='saveData()'>
<button (click)='navigateToPage2()'>

从获得焦点的文本框跳转到按钮 click ，两个事件之间存在竞争条件。

问题是按钮点击被忽略，因为模糊事件首先触发并将微调器带到屏幕上，同时它进行服务器调用以保存数据。

我该如何解决这个确切的问题？

在模糊事件之前是否有一个技巧可以让点击事件触发？

Answer 1

而不是这种在模糊事件之前触发点击的黑客尝试以下解决方案：

为了更好地理解这一点，您需要知道特定事件触发的顺序：

1. 鼠标按下
2. 模糊
3. 鼠标向上
4. 点击

在这种情况下，您可以使用此命令对您有利。

尝试改用 Mousedown 事件，它会在模糊事件之前触发。

此外，尝试运行此代码片段。 它将帮助您理解上述顺序

 Type first in text box below and then click button <br/> <input type='text' onblur="console.log('blur');" /> <button onclick="console.log('click')" onmouseup="console.log('mouseup')" onmousedown="console.log('mousedown')" > Type first and then this click button</button>

Answer 2

根据此示例，您还可以在 mouseDown 事件上使用e.preventDefault ： https : e.preventDefault （他使用了 jquery，但它应该与其他库相同）

Answer 3

如果您正在收听(blur)="onBlur()"包的内容onBlur()在setTimout与持续时间100毫秒以上。