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

Question

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

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

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

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

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

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

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

根据这个例子，你也可以e.preventDefault在 mouseDown 事件上使用：https://codepen.io/mudassir0909/pen/eIHqB（他使用了jquery，但它应该与其他库相同）