在处理表单登录的过程中，遇到了一个问题，当我们在输入框输入内容输入框获取到焦点时，输入框后面会出现一个图标删除已输入的内容，因此删除图标会绑定一个click事件，但是当我们点击图标的时候，也触发了input的blur事件，blur事件会让input失去焦点时隐藏删除的图标，并且blur事件先于图标的click事件执行，因此这时候点击图标并不会删除输入框已输入的内容，而是图标消失了，那么这个结果就不是我们想要的，那怎么解决这个问题呢？
我们先看下blur和click事件
blur事件：当元素失去焦点时触发blur事件；早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素，blur和focus事件不会冒泡，其他表单事件都可以。
click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。
问题产生的原因：
这是因为blur事件比click事件先触发，而javascript为单线程，同一时间只能执行处理一个事件，所以当blur执行时，导致其后续click事件并不会执行
解决方法一：如果让click事件比blur事件先触发就没有问题了，因此可以给blur事件加定时器延迟触发
/*删除图标的点击事件*/
$(".delete-icon").on("click",function () {
$(this).prev("input").val("").focus();
});
/*输入框失去焦点的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {
var $this = $(this);
setTimeout(function(){
$this.parent().removeClass("active");
$this.next(".delete-icon").hide();
},250)
});
缺点：设置多久的延时是一个难以两全的问题，时间太短不能保证click事件的100%触发，时间太长则会造成卡顿的感觉，影响用户体验
解决方法二：将click事件改为mousedown事件，mousedown事件是优先于blur事件执行
/*删除图标的点击事件*/
$(".delete-icon").on("mousedown",function () {
$(this).prev("input").val("").focus();
});
/*输入框失去焦点的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {
var $this = $(this);
$this.parent().removeClass("active");
$this.next(".delete-icon").hide();
});
缺点：鼠标按下便触发了事件，不收起、长按也会触发，可能造成用户体验不好
解决方法三：给图标再添加一个mousedown事件，在其中执行event.preventDefault()阻止浏览器默认事件，这样点击按钮时输入框就不会失去焦点了
/*阻止浏览器默认事件*/
$(".delete-icon").on("mousedown",function(e) {
e.preventDefault();
})
/*删除图标的点击事件*/
$(".delete-icon").on("click",function () {
$(this).prev("input").val("").focus();
});
/*输入框失去焦点的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {
var $this = $(this);
$this.parent().removeClass("active");
$this.next(".delete-icon").hide();
});
解决方法四：动态绑定blur事件，当鼠标进入input框父级元素时，移除input绑定事件blur，当鼠标移出输入框父级元素时，给input绑定blur事件
/*动态绑定blur事件*/
$(".login-con li").mouseenter(function(){
$(this).find("input").unbind("blur");
});
$(".login-con li").mouseleave(function(event){
$(this).find("input").bind("blur");
});
/*删除图标的点击事件*/
$(".delete-icon").on("click",function () {
$(this).prev("input").val("").focus();
});
/*输入框失去焦点的blur事件*/
$("input[name='username'],input[name='password']").on("blur",function () {
var $this = $(this);
$this.parent().removeClass("active");
$this.next(".delete-icon").hide();
});
推荐使用方法三、方法四
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流
