blur事件与click事件冲突的解决办法

在处理表单登录的过程中，遇到了一个问题，当我们在输入框输入内容输入框获取到焦点时，输入框后面会出现一个图标删除已输入的内容，因此删除图标会绑定一个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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流