如何解决Js先触发失去焦点事件再执行点击事件的问题-创新互联

js代码：

//绑定监听手机号文本框内容按钮事件
$('#mobile').keyup(function() {
 var clearBtn = $(this).parent().find('.icon-clear');
 if($(this).val() == '') { clearBtn.hide(); } 
 else { clearBtn.css('display', 'table-cell'); }
});
//手机号输入框失去焦点，去除清除按钮;获取焦点时，若有值则显示清除按钮
$('#mobile').blur(function() {
 $('#mobile').parent().find('.icon-clear').hide();
}).focus(function(){
 if($(this).val() != ''){
  $(this).parent().find('.icon-clear').css('display', 'table-cell');
 }
});
//清除文本框内容事件
$('.icon-clear').click(function() {
 $(this).parent().find('input').val('');
 $(this).hide();
});

这样看着像是什么问题都没有的样子，其实不然，运行之后发现，在文本框中输入内容后文本框获取焦点，这个时候我想要去点击清除按钮来清除刚才我写的东西，发现，文本框内容没有置空，清除按钮却先消失了，很纳闷啊。

后来经查阅发现，是先执行的失去焦点事件，那么如何去解决呢？

而后，我在失去焦点事件中对其中的方法进行了延迟处理，如下所示：

//验证码输入框失去焦点，去除清除按钮;获取焦点时，若有值则显示清除按钮
$('#auth_code').blur(function() {
 setTimeout(function() { //进行延时处理，时间单位为千分之一秒
  $('#auth_code').parent().find('.icon-clear').hide();
 }, 100)
}).focus(function(){
 if($(this).val() != ''){
  $(this).parent().find('.icon-clear').css('display', 'table-cell');
 }
});

如此操作后就可以完美解决了，目前未发现任何副作用。

感谢你能够认真阅读完这篇文章，希望小编分享的“如何解决Js先触发失去焦点事件再执行点击事件的问题”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!