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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
Javascript中的变量使用说明
May 18 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
javascript递归函数定义和用法示例分析
Jul 22 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python基本语法练习实例
2017/09/19 Python
python文件名和文件路径操作实例
2017/09/29 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
python的json包位置及用法总结
2020/06/21 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
美国汽车交易网站:Edmunds
2016/08/17 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
网络工程师的自我评价
2013/10/02 职场文书
会计自我鉴定
2013/11/02 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
离职感谢信
2015/01/21 职场文书