input中blur失去焦点事件与点击事件冲突的解决方法

遇到一个问题，就是输入框input的blur事件与点击click事件的冲突了，在click的时候会先触发blur事件，没有触发click

// 备注名
$(function(){
  $(".cy-name-input input").on({
    focus:function() {
      $(".cy-close").css('display','block');
    },
    blur:function() {
      setTimeout(function(){
        $(".cy-close").css('display','none');
      },250)
    }
  })
  $(".cy-close").click(function(){
    $(".cy-name-input input").val('');
  })
})

还有一种情况，下拉框blur和click事件冲突，导致不能正常选择值

原因：由于JavaScript为单线程，同一时间只能执行处理一个事件。“blur优先于click执行”。而在本示例中，由于blur处理程序，会将对下拉框展示区隐藏，所以导致其后续click事件并不会执行。

解决方案1：对blur事件进行延迟，让click先执行。

$("input").focus(function(){
        // input框获取焦点，展示下拉框
        $(".search-list").attr("data-status", "show");
    }).blur(function(){
        setTimeout(function(){
            // input框失去焦点，隐藏下拉框
            $(".search-list").attr("data-status", "hide");
        }, 300);
    });
    // 选择对应选项，并赋值给input框
    $(".search-list li a").click(function(){
        console.log("执行");
        $("input").val($(this).text());
    });

解决方案2：将click事件改为mousedown，让其优先于blur事件执行

 $("input").focus(function(){
        // input框获取焦点，展示下拉框
        $(".search-list").attr("data-status", "show");
    }).blur(function(){
        // input框失去焦点，隐藏下拉框
        $(".search-list").attr("data-status", "hide");
    });
    // 选择对应选项，并赋值给input框
    $(".search-list li a").mousedown(function(){
        $("input").val($(this).text());
    });

mousedown事件：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。

mouseup事件：当在元素上放松鼠标按钮时，会发生mouseup事件。

注意：

（1）mousedown与click 事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。

（2）mouseup与click事件不同，mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

其执行顺序为：mousedown >> mouseup >> click

参考网址：http://blog.csdn.net/ligang2585116/article/details/51764828

input中blur失去焦点事件与点击事件冲突的解决方法

猜你喜欢