jquery 让 失去焦点-模糊风暴和点击风暴冲突的解决办法

在处理表单登录的过程中，我们遇到了一个问题。 当我们在输入框中输入内容并且输入框获得焦点时，输入框旁边会出现一个图标，用于删除输入的内容，所以删除该图标会绑定一个点击风暴，但是当我们点击该图标时，它还会触发输入的模糊风暴。 模糊风暴会在输入失去焦点时隐藏删除的图标，但是模糊风暴是在图标的点击风暴之前执行的，所以此时点击图标并不会删除输入框中已经输入的内容，但是图标消失了，所以这个结果不是我们想要的，那么如何解决这个问题呢？

我们先来看看模糊和点击风暴

模糊：当元素失去焦点时触发模糊； 早些时候，模糊仅发生在表单元素上。 在新浏览器中，该波形可以用于任何元素，模糊和焦点波形不会冒泡jquery 让 失去焦点，其他形式的波形都可以。

点击风暴：点击元素时触发点击风暴； 所有元素都会有这场风暴，并且会形成泡沫。

问题原因：

这是因为blur事件是在click事件之前触发的jquery 让 失去焦点，而javascript是单线程的，一次只能处理一个事件，所以当执行blur时，后面的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)
});

缺点：设置延时多长时间是一个不可兼得的问题。 如果时间太紧，无法保证100%触发点击风暴。 如果时间太长，会造成冻结感，影响用户体验。

方案二：将clickstorm改为mousedownstorm，mousedownstorm先于​​blurstorm执行

            /*删除图标的点击事件*/
            $(".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();
            });

解决方案4：动态绑定模糊。 当鼠标步入输入框的父元素时，去除输入绑定模糊。 当鼠标移出输入框的父元素时，将模糊绑定到输入。

            /*动态绑定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();
            });

推荐方法3和方法4

原作者技术博客：

一位1995年出生的后端女孩，爱读书、爱交友，在这里记录一下工作中遇到的问题，希望能给看到的大家带来一点帮助。

欢迎留言