0

0

jquery focusout和click事件冲突的问题解决办法分享

黄舟

黄舟

发布时间:2017-06-27 13:28:13

|

1650人浏览过

|

来源于php中文网

原创

  在主流的搜索引擎上搜索时,输入内容,往往会弹出智能提示。输入框为input,智能提示区域为suggest。接下来一般有两种操作:

       1.选择某一提示,则把内容复制到input中,自动关闭suggest;

       2.点击网页其他地方,自动关闭suggest。

       实现第一个可以用click事件,在suggest中增加鼠标click事件,在处理中将点击的内容写到input中,然后关闭suggest。单独测试无问题;

       实现第二个可以在input元素上增加focusout事件或者blur事件,在input中丢失焦点的时候,关闭suggest。单独测试无问题。

       但是放在一起的时候,就会出现问题,只响应了丢失焦点事件(关闭了suggest),却没有响应内容点击事件(没有获取点击的suggest内容)。

       不明白为什么会冲突,在网上搜,也搜到了一些同样的问题,有人建议使用blur,但是blur跟focusout是一样的道理,都不行。

       思前想后,忽然想到click事件的触发条件,你点击一个按键,触发一次点击事件,而一次点击包括:鼠标点下去,鼠标松开。而jquery的click事件是鼠标松开后才触发的(事实上button元素和href元素的点击事件都是这样),这样一想就明白刚刚出现的冲突问题了,你点中suggest中的某一提示,这时候input丢失焦点事件触发,关闭了suggest区域,而这个时候你的鼠标才松开(电脑反应速度要快于鼠标点击松开速度),完成点击,但此时鼠标已经不在suggest要选择的提示上面了,所以也就无法触发suggest里的点击事件。

 

Giiso写作机器人
Giiso写作机器人

Giiso写作机器人,让写作更简单

下载

        想明白了这点,问题就好解决了,把suggest中的响应事假改成mousedown,这样在鼠标点的时候就会触发,测试了一下,果然成功了,mousedown事件和focusout事件都得到了正确处理。

//input的丢失焦点事件  
$("#input_area").focusout(function(){  
    $("#suggest_div").hide();  
});  
  
//suggest区域的点击事件  
$("#suggest_div li").mousedown(function(){  
    $("#input_area").val($(this).text());  
    $("#suggest_div").hide();  
});

 将click换成mousedown就完全ok了,简单到我都不好意思说,但是有的时候,也不容易想到哇!

 

       另外,在网上还找到了别的方法,一个是

$("#input_area").keypress(function() {  
    $("#suggest_div").slideDown();  
}).blur(function() {  
    $("#suggest_div").slideUp();  
});

 这种方法用隐藏动画造成了延迟,使得suggest区域的click事件可以触发。但是slide可不适应所有情况,而且把功能成功与否建立在动画隐藏的速度快慢上,个人觉得也不太合适。

 

       另一种方法是将input和suggest用一个div包起来,事件直接加在div上面。这个未测试过,不过理论上应该也是可行的。

相关专题

更多
Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

11

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

4

2026.01.21

无人机驾驶证报考 uom民用无人机综合管理平台官网
无人机驾驶证报考 uom民用无人机综合管理平台官网

无人机驾驶证(CAAC执照)报考需年满16周岁,初中以上学历,身体健康(矫正视力1.0以上,无严重疾病),且无犯罪记录。个人需通过民航局授权的训练机构报名,经理论(法规、原理)、模拟飞行、实操(GPS/姿态模式)及地面站训练后考试合格,通常15-25天拿证。

16

2026.01.21

Python多线程合集
Python多线程合集

本专题整合了Python多线程相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.21

java多线程相关教程合集
java多线程相关教程合集

本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.21

windows激活码分享 windows一键激活教程指南
windows激活码分享 windows一键激活教程指南

Windows 10/11一键激活可以通过PowerShell脚本或KMS工具实现永久或长期激活。最推荐的简便方法是打开PowerShell(管理员),运行 irm https://get.activated.win | iex 脚本,按提示选择数字激活(选项1)。其他方法包括使用HEU KMS Activator工具进行智能激活。

2

2026.01.21

excel表格操作技巧大全 表格制作excel教程
excel表格操作技巧大全 表格制作excel教程

Excel表格操作的核心技巧在于 熟练使用快捷键、数据处理函数及视图工具,如Ctrl+C/V(复制粘贴)、Alt+=(自动求和)、条件格式、数据验证及数据透视表。掌握这些可大幅提升数据分析与办公效率,实现快速录入、查找、筛选和汇总。

6

2026.01.21

毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm
毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm

毒蘑菇VOLUMESHADER_BM测试网站网址为https://toolwa.com/vsbm/,该平台基于WebGL技术通过渲染高复杂度三维分形图形评估设备图形处理能力,用户可通过拖动彩色物体观察画面流畅度判断GPU与CPU协同性能;测试兼容多种设备,但中低端手机易卡顿或崩溃,高端机型可能因发热降频影响表现,桌面端需启用独立显卡并使用支持WebGL的主流浏览器以确保准确结果

25

2026.01.21

github中文官网入口 github中文版官网网页进入
github中文官网入口 github中文版官网网页进入

github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

7

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 4.5万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.6万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号