如何防止點擊和模糊事件之間的競爭？

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