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

目前成都創(chuàng)新互聯(lián)公司已為上千家的企業(yè)提供了網(wǎng)站建設、域名、虛擬主機、網(wǎng)站托管、服務器租用、企業(yè)網(wǎng)站設計、天鎮(zhèn)網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

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事件先觸發(fā)就沒有問題了，所以可以給blur事件延遲觸發(fā)。

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事件，讓其優(yōu)先于blur事件執(zhí)行(缺點是用戶體驗不好，鼠標按下便觸發(fā)了事件)。

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事件，在其中執(zhí)行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事件的沖突問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關知識。

文章標題：JavaScript中怎么解決blur和click事件的沖突-創(chuàng)新互聯(lián)
鏈接地址：http://www.rwnh.cn/article16/cschgg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、網(wǎng)站制作、企業(yè)網(wǎng)站制作、定制網(wǎng)站、企業(yè)建站、關鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)