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

【问题标题】：How to prevent racing between click and blur event ?如何防止点击和模糊事件之间的竞争？
【发布时间】：2017-09-07 09:45:29
【问题描述】：

我的 Angular 代码如下所示 >

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

从文本框被聚焦跳转到按钮点击，两个事件之间存在racing条件。

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

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

是否有在模糊事件之前触发点击事件的技巧？

【问题讨论】：

这就像你在听两个人，谁先说话，谁先被识别。我不确定这是否可能，但您可以根据需要尝试自定义事件。
saveData 和 navigateToPage2 的代码是什么？
那么 saveData 是异步的吗？无法从您的代码片段中分辨出来。我的猜测是你需要让导航代码知道打开的请求并等到它完成......
我来晚了，但万一其他人可以使用这个方案，你可以尝试将保存数据的功能放在超时功能中：setTimeout( () => this.saveData(), 100 );

标签： javascript html angular

【解决方案1】：

不要在模糊事件之前触发点击，而是尝试以下解决方案：

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

鼠标向下
模糊
鼠标上移
点击

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

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

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

    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>

【讨论】：

直接使用 mousedown 的唯一问题是，用户不希望在 mousedown 之后发生动作，只有在 mouseup 之后，并且只有当 mouseup 发生在与 mousedown 发生的相同元素上时，也就是说，如果您按下鼠标，然后移动鼠标然后鼠标向上，则不会触发单击事件。有时我点击了一些我不想点击的东西，在我松开按钮之前将鼠标移开，我希望该动作不会发生。
另外，谢谢@JuanMendes。我不认为这是我的应用程序的问题。但非常感谢您的意见。
@NickThakkar 但是它是如何只用鼠标左键工作的呢？ onMouseDown 触发所有点击事件：左键、右键...

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果您正在收听(blur)="onBlur()" 将onBlur() 的内容包装在setTimout 中，持续时间为100 毫秒或更长。

【讨论】：