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

Question

我的Angular代码看起来像这样＆gt;

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

从正在聚焦的文本框跳转到按钮单击，两个事件之间存在竞速条件。

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

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

在模糊事件之前是否存在使点击事件触发的黑客攻击？

Answer 1

在模糊事件尝试以下解决方案之前，不要点击这样的黑客点击：

为了更好地理解这一点，您需要了解特定事件触发的订单：

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

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

请尝试使用Mousedown事件，并在模糊事件之前触发。

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

＆＃13;
＆＃13;
    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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

根据此示例，您还可以在mouseDown事件：https://codepen.io/mudassir0909/pen/eIHqB上使用e.preventDefault（他使用了jquery，但与其他lib应该相同）

Answer 3

如果您正在听(blur)="onBlur()" 将onBlur()的内容包装在setTimout毫秒或更长的100中。