jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
更新时间：2016年08月15日 14:32:38 作者：自信的菜鸟
这篇文章主要介绍了jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题,非常不错，具有参考借鉴价值，需要的朋友可以参考下
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事件冲突问题，希望对大家有所帮助,如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了jquery实现标签上移、下移、置顶的相关资料,并附上示例，非常实用，需要的朋友可以参考下2015-04-04
本文主要介绍jQuery获取radio选中项的值的方法，希望能帮到大家，有需要的朋友可以参考一下。2016-06-06
本篇文章是对在Jquery中模板数据绑定插件的使用方法进行了详细的分析介绍，需要的朋友参考下2013-07-07
刚刚弄好了一个jquery动态分页效果，拿出来与大家分享，效果与时光网的差不多2014-09-09
Orbit是一个设计良好并且容易使用的jQuery图片滑动幻灯片插件，它除了支持图片滚动切换展示外，还支持针对内容的滚动。插件的定制性相当高，它提供了多个参数的设置，通过设置你可以将它打造成完全符合你要求的样式。2015-04-04
这篇文章主要介绍了jQuery事件绑定与解除绑定实现方法,实例分析了jQuery中bind与unbind方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
本文主要给大家讲解的是jQuery使用元素属性attr设置多个键值或函数的方法和示例，非常的实用，推荐给小伙伴们参考下。2015-02-02
这篇文章主要给大家介绍了jQuery中DOM节点的插入方法，文章总结的很全面，相信对大家具有一定的参考价值，需要的朋友们一起来看看吧。2017-01-01
这篇文章主要为大家详细介绍了jQuery的操作属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
在一些网站上，我们经常见到返回顶部的效果，本文给大家介绍基于jquery如何实现返回顶部效果，非常不错，感兴趣的朋友可以参考下2016-07-07
最新评论