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 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
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
SONY SRF-40W电路分析
2021/03/02 无线电
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php存储过程调用实例代码
2013/02/03 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
php车辆违章查询数据示例
2016/10/14 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
理解javascript异步编程
2016/01/27 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
Python多线程爬虫简单示例
2016/03/04 Python
Python中functools模块的常用函数解析
2016/06/30 Python
python实现折半查找和归并排序算法
2017/04/14 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
二审答辩状范文
2015/05/22 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS