解决Js先触发失去焦点事件再执行点击事件的问题


Posted in Javascript onAugust 30, 2018

最近在做公司的某个从项目,基本设计和淘宝登陆页类似:

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();
});

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

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

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

//验证码输入框失去焦点,去除清除按钮;获取焦点时,若有值则显示清除按钮
$('#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先触发失去焦点事件再执行点击事件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
Sea.JS知识总结
May 05 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
微信小程序之判断页面滚动方向的示例代码
Aug 30 #Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 #Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 #Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 #Javascript
对vue中methods互相调用的方法详解
Aug 30 #Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 #Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 #Javascript
You might like
深入解析php之sphinx
2013/05/15 PHP
很可爱的输入框
2008/08/03 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
js实现的下拉框二级联动效果
2016/04/30 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python编程之序列操作实例详解
2017/07/22 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
汽车技术服务英文求职信范文
2014/01/02 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
创新社会管理心得体会
2014/09/12 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
普宁寺导游词
2015/02/04 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
会议新闻稿
2015/07/17 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫