问题：当焦点在输入框时，点击取消按钮会触发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';
}
以上就是js中blur和click事件的冲突的全部知识点内容总结，大家还可以通过学步园了解更多技术知识。