How to prevent racing between click and blur event ?

Question

my Angular code look like this >

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

Jumping from textbox being focused to the button click , there is racing condition between two events.

Problem is button click gets ignored because the blur event fires first and brings the spinner on the screen while its making server call to save data.

How do I solve this exact problem?

Is there a hack to make click event fire before blur event ?

Answer 1

Instead of such hack to fire click before blur event try following solution :

To understand this better you need to know this Order in which specific event fires:

1. mouse down
2. blur
3. mouse up
4. click

You can use this order to work in your favor in this case.

Try using Mousedown event instead and that will fire before blur event.

Also, try running this code snippet. It will help you understand the above order

 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毫秒以上。