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之AJAX框架使用说明
Apr 24 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
js前端图片加载异常兜底方案
Jun 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文件下载类
2006/12/06 PHP
程序员编程十条戒律
2009/07/09 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP钩子实现方法解析
2019/05/21 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python卸载模块的方法汇总
2016/06/07 Python
Python中django学习心得
2017/12/06 Python
Python高级用法总结
2018/05/26 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python 图像平移和旋转的实例
2019/01/10 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
党员民主评议个人总结
2014/10/20 职场文书
2014年宣传工作总结
2014/11/18 职场文书
安全教育观后感
2015/06/17 职场文书
PHP新手指南
2021/04/01 PHP
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android