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

我的角度代碼看起來象>如何防止點擊和模糊事件之間的競賽？

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

從文本框是跳躍集中到按鈕點擊，有賽車兩個事件之間條件。

問題是按鈕點擊被忽略，因爲模糊事件首先觸發，並在屏幕上顯示微調器，同時其調用服務器來保存數據。

我該如何解決這個確切的問題？

模糊事件發生前是否有黑客讓點擊事件觸發？

來源

2017-04-11 j Doe

這就像你正在收聽的是兩個人的，誰第一個說會被首次確認。我不確定是否有可能，但如果您願意，可以嘗試自定義事件。 – Roljhon

saveData和navigateToPage2的代碼是什麼？ –

那麼saveData是異步的嗎？不可能從你的代碼sniplet中知道。我的猜測是你需要讓導航代碼知道打開的請求，並等待它完成... – epascarello

代替這樣的黑客攻擊，火單擊模糊事件之前嘗試以下解決方案：

爲了更好的理解，你需要知道這個順序特定事件觸發：

mouse down
blur
鼠標向上
點擊

你可以使用這個命令對你有利的工作在這種情況下。

嘗試使用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>

來源

2017-04-11 20:52:17

直接使用mousedown的唯一問題是，用戶不希望mousedown發生操作，只有在mouseup，並且只有當mouseup發生在mousedown發生的相同元素上時，也就是說，如果你點擊鼠標，移動你的鼠標然後mouseup，點擊事件不會觸發。有時候，我點擊了一些我不想要的東西，在我放開按鈕之前移開鼠標，我希望不會發生這種情況。 OMG！ –

天才的想法。它非常乾淨，適合我的情況。非常感謝，@Nick Thakkar –

此外，謝謝@JuanMendes。我不認爲這是我的應用程序的問題。但真的很感謝你的意見。 –

如果您想處理點擊事件，您可以做的最好的方法是在發送請求並檢查按鈕上是否出現了mousedown之前等待一會兒。見How can tell I which element i clicked on to trigger a blur event handler?

var isClick = false; 
 

 

 
document.querySelector('input').addEventListener('blur', (e) => { 
 
    if (isClick) { 
 
     console.log('blur caused by click on button'); 
 
    } else { 
 
     console.log('blur not by click'); 
 
    } 
 
}); 
 

 
document.querySelector('button').addEventListener('mousedown',() => { 
 
    isClick = true; 
 
    console.log('mouse down on button, ignore blur on input'); 
 
    setTimeout(() => { 
 
    isClick = false 
 
    }, 100); 
 
}); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    console.log('Processing click'); 
 
});

<input type='text'> 
 
<button>

來源

2017-04-11 20:36:30

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

回答

相關問題