解决Js先触发失去焦点事件再执⾏点击事件的问题
最近在做公司的某个从项⽬，基本设计和淘宝登陆页类似：
1）⽂本框内容为空是，⽂本框右侧⽆清除按钮，当有内容时⽴即显⽰清除按钮；
2）当⽂本框失去焦点时，清除按钮消失，获取焦点时若⽂本框内有内容，则显⽰清除按钮，否则不显⽰；
3）⽂本框再有内容且获取焦点的情况下，点击清除按钮，⽂本框内容置空，且清除按钮消失。
随后想了想，感觉是个很简单的需求，只要结合使⽤keyup和blur以及click时间就可以解决了，然⽽，结果却不是我想要的，代码如下：
html代码：
<div class="input-group">
<input type="text" id="mobile" class="form-control" placeholder="请输⼊⼿机号" autocomplete="off" />
<div class="input-group-addon icon-clear"></div>
</div>
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();
});
这样看着像是什么问题都没有的样⼦，其实不然，运⾏之后发现，在⽂本框中输⼊内容后⽂本框获取
焦点，这个时候我想要去点击清除按钮来清除刚才我写的东西，发现，⽂本框内容没有置空，清除按钮却先消失了，很纳闷啊。
blur事件
后来经查阅发现，是先执⾏的失去焦点事件，那么如何去解决呢？
⽽后，我在失去焦点事件中对其中的⽅法进⾏了延迟处理，如下所⽰：
//验证码输⼊框失去焦点，去除清除按钮；获取焦点时，若有值则显⽰清除按钮
$('#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先触发失去焦点事件再执⾏点击事件的问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。