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 相关文章推荐
JSON辅助格式化处理方法
Mar 26 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
原生javascript获取元素样式
Dec 31 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
vue + axios get下载文件功能
Sep 25 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
php设计模式 Observer(观察者模式)
2011/06/26 PHP
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python变量和数据类型详解
2017/02/15 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python 字符串只保留汉字的方法
2018/11/16 Python
python命令行工具Click快速掌握
2019/07/04 Python
django 单表操作实例详解
2019/07/30 Python
django从后台返回html代码的实例
2020/03/11 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
财务会计应届生求职信
2013/11/24 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
专家推荐信范文
2015/03/26 职场文书
地球上的星星观后感
2015/06/02 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
java实现web实时消息推送的七种方案
2022/07/23 Java/Android