jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题


Posted in Javascript onAugust 15, 2016

HTML结构:很简单,就一个input,一个div,能说明问题就OK了;

<input type="text" value="默认值"><br/><br/><div>搜索</div>

想要实现的结果:

1、input框获取焦点时value为“”,失去焦点时value为“默认值”;-----这个很好实现;

2、当在input框中输入要搜素的内容后,点击div搜索,要求控制台打印输出要搜素的内容(当然每个项目的需求不同,这里只是举个例子),而且要求点击后不影响input的focus和blur行为;----这个才是重点

先看看冲突没有解决之前的效果;

$("input").focus(function () { 
this.value = ""; }).blur(function () { 
this.value = "默认值"; });$("div").click(function () { 
var value = $("input").val(); 
console.log(value); });

结果:在input中输入“aaaa”,然后点击div,控制台输出的却是“默认值”,与预想的结果不符;

解决方法一:在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候,input的blur行为先被触发,但是由于加了定时器延迟,所以得等到div的click回调执行完成后才能执行input的blur行为的回调;

$("input").focus(function () { 
this.value = "";}).blur(function () { 
var self=this; 
setTimeout(function(){ 
self.value = "默认值"; 
},300)}); $("div").click(function () {//这部分不变 
var value = $("input").val(); 
console.log(value); });

结果:在input中输入“aaaa”,然后点击div,控制台输出的却是“aaaa”,符合预想的结果;

解决方法二:将div的click事件改成mousedown事件,因为mousedown行为是鼠标点下去的时候就被触发,而click行为是鼠标点下去再抬起的时候才被触发

$("input").focus(function () {//这部分不变 
this.value = "";}).blur(function () { 
this.value = "默认值";}); $("div").mousedown(function () { 
var value = $("input").val(); 
console.log(value); });

结果:在input中输入“aaaa”,然后点击div,控制台输出的却是“aaaa”,符合预想的结果;

以上所述是小编给大家介绍的jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
jquery json 实例代码
Dec 02 Javascript
js 函数调用模式小结
Dec 26 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
Web安全测试之XSS实例讲解
Aug 15 #Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 #Javascript
卸载安装Node.js与npm过程详解
Aug 15 #Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 #Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 #Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 #Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 #Javascript
You might like
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
基于pear auth实现登录验证
2010/02/26 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
javascript 常用方法总结
2009/06/03 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
python实现简单坦克大战
2020/03/27 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
英语翻译系毕业生求职信
2013/09/29 职场文书
村长贪污检举信
2014/04/04 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
实习生个人总结范文
2015/02/28 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
2015中学教学工作总结
2015/07/22 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
python 网络编程要点总结
2021/06/18 Python