JavaScript中怎么解決blur和click事件的沖突

JavaScript中怎么解決blur和click事件的沖突，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

　　問題：當焦點在輸入框時，點擊取消按鈕會觸發blur和click事件，導致需要點擊兩次取消按鈕才能關閉彈窗。

　　原因：這是因為blur事件比click事件先觸發，而 javascript為單線程，同一時間只能執行處理一個事件 ，所以當blur處理程序時，導致其后續click事件并不會執行。

　　var popover = document.getElementById('popover');

　　var input = document.getElementById('category-name');

　　var btn = document.getElementById('btn-cancel');

　　var error = document.getElementById('error');

　　解決方案1：如果click事件比blur事件先觸發就沒有問題了，所以可以給blur事件延遲觸發。

　　var timer;

　　input.onblur = function() {

　　timer = setTimeout(function() {

　　console.warn('onblur');

　　error.style.display = 'block';

　　}, 100);

　　}

　　btn.onclick = function() {

　　console.warn('onclick');

　　clearTimeout(timer);

　　error.style.display = 'none';

　　popover.style.display = 'none';

　　}

　　解決方案2：將click事件改為mousedown事件，讓其優先于blur事件執行(缺點是用戶體驗不好，鼠標按下便觸發了事件)。

　　input.onblur = function() {

　　console.warn('onblur');

　　error.style.display = 'block';

　　}

　　btn.onmousedown = function() {

　　console.warn('onmousedown');

　　error.style.display = 'none';

　　popover.style.display = 'none';

　　}

　　解決方案3：給按鈕添加一個mousedown事件，在其中執行event.preventDefault()阻止瀏覽器默認事件，這樣點擊按鈕時輸入框就不會失去焦點了。

　　input.onblur = function() {

　　console.warn('onblur');

　　error.style.display = 'block';

　　}

　　btn.onmousedown = function(e) {

　　console.warn('onmousedown');

　　e.preventDefault();

　　}

　　btn.onclick = function() {

　　console.warn('onclick');

　　error.style.display = 'none';

　　popover.style.display = 'none';

　　}

關于JavaScript中怎么解決blur和click事件的沖突問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。