欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-14 21:37:35
...
在主流的搜索引擎上搜索时,输入内容,往往会弹出智能提示。输入框为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里的点击事件。

想明白了这点,问题就好解决了,把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上面。这个未测试过,不过理论上应该也是可行的。

以上就是jquery focusout和click事件冲突的问题解决办法分享的详细内容,更多请关注其它相关文章!