最近做了一个查询小功能,input输入框输入文字后,自动列出几条查询结果,可以键盘上下键或鼠标进行查询结果选择,并且点击输入框其他地方要隐藏这个列出的结果。

但比较头疼的是input上添加blur事件和查询提示结果click事件发生冲突,点击查询结果时,会首先触发input的blur事件,导致将查询提示结果隐藏选择不了,

解决办法:

给blur失去焦点事件添加延迟事件,让blur事件在click事件后执行。

$(".query_tools").blur(function(event){
    setTimeout(function () {
        $(".query_list").css("display""none");
    }, 300);
});
 
另一个解决方案有bug,
2.添加mouseover,mouseout 。前者删除blur事件,后者添加回来。鼠标在click执行之前先执行了mouseover事件,删除blur就不会隐藏了,然后点击完成后,mouseout再把blur添加回来,就行了。(mouseover ,mouseout不会转移焦点)。
测试的是chrome浏览器。

jquery点击click事件和blur事件冲突如何解决的更多相关文章

  1. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  2. JS/jQuery点击某元素之外触发事件

    JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...

  3. 【五】jquery之事件(focus事件与blur事件)[提示语的出现及消失时机]

    例题:当鼠标移动到某个文本框时,提示语消失. 当失去焦点时,如果该文本框有内容,保存内容.没有内容,则恢复最初的提示语句 <!DOCTYPE html> <html> < ...

  4. input 输入框 change 事件和 blur 事件

    输入框的 change 和 blur  事件绝大多数情况下表现是一致的,输入结束后离开输入框会先后触发 change 和 blur.那么这两个事件的区别在哪呢? 当文本框获得焦点后,没有输入任何内容, ...

  5. 让HTML标签、DIV、SPAN拥有focus事件和blur事件,聚焦和失焦

    DIV和其他普通标签是不具有onfocus和onblur事件的.INPUT和A标签为什么拥有?而DIV和SPAN等普通标签却没有?有时候我们习惯性用键盘的TAB来移动光标,仔细看你会发现,光标只在IN ...

  6. 【jQeury】input输入框状态,input事件,blur事件,focus事件

    //输入框正在输入时 $("#test1").on('input',function(){ alert('正在输入'); }) //输入框得到焦点时 $("#test2& ...

  7. 搜索提示時jquery的focusout和click事件沖突問題完美解决

          在主流的搜索引擎上搜索時,輸入內容,往往會彈出智能提示.輸入框为input,智能提示區域为suggest.接下來一般有兩種操作:        1.選擇某一提示,則把內容复制到input中 ...

  8. js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...

  9. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

随机推荐

  1. DER编码简介

    概念:DER是BER的子集,它为每一个ASN.1类型定义一种唯一的编码方案. DER与BER的区别:DER在BER的基础上增加了如下限制:长度小于等于127,必须使用短型长度表示法.长度大于127,必 ...

  2. Java 中(静态)变量、(静态)代码块的执行顺序

    Java 中(静态)变量.(静态)代码块的执行顺序 非原创 本文讨论 Java 中(静态)变量.(静态)代码块的执行顺序 首先创建 3 个类 1.Foo 类 public class Foo { pu ...

  3. Java StringJoiner

    Java StringJoiner Java added a new final class StringJoiner in java.util package. It is used to cons ...

  4. 《java虚拟机》----垃圾收集、内存分配

    No1: 程序计数器.虚拟机栈.本地方法栈3个区域随线程而生,随线程而灭:栈中的栈帧随着方法的进入和退出而有条不紊的执行着出栈和入栈操作.每一个栈帧中分配多少内存基本上市在类结构确定下来时就已知的,因 ...

  5. 【伪暴力+智商剪枝】Codeforces Round #489 (Div. 2) D

    失踪人口突然回归……orz.题解还是有必要写的,虽然估计只有自己(?自己也不一定看得懂)看得懂. 题目链接:http://codeforces.com/contest/992/problem/D 题目 ...

  6. 【JAVAWEB学习笔记】19_事务概述、操作、特性和隔离级别

    事务 学习目标 案例-完成转账 一.事务概述 1.什么是事务 一件事情有n个组成单元 要不这n个组成单元同时成功 要不n个单元就同时失败 就是将n个组成单元放到一个事务中 2.mysql的事务 默认的 ...

  7. FastReport.Net使用:[15]富文本控件使用

    富文本(Rich Text)控件用于显示Rtf格式的文本. 认识富文本编辑窗体 1.下图就是富文本的编辑窗体,乍一看就像Word一样,不过功能没有Word强大了.具体功能就不一一介绍了,用个Word的 ...

  8. 【BZOJ 2822】2822: [AHOI2012]树屋阶梯(卡特兰数+高精度)

    2822: [AHOI2012]树屋阶梯 Description 暑假期间,小龙报名了一个模拟野外生存作战训练班来锻炼体魄,训练的第一个晚上,教官就给他们出了个难题.由于地上露营湿气重,必须选择在高处 ...

  9. Centos 右上角面板里没有wired network图标的问题

    开了很多的网页查看解决这个问题,都不是很有效,最后很简单的改了下一个文件就ok了,自己记录下,以免忘记! 打入命令:sudo gedit /etc/NetworkManager/nm-system-s ...

  10. uoj 41 【清华集训2014】矩阵变换 婚姻稳定问题

    [清华集训2014]矩阵变换 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/41 Description 给出 ...