搜索提示时jquery的focusout和click事件冲突问题完美解决 搜索提示智能提示focusoutclick事件冲突

      在主流的搜索引擎上搜索时，输入内容，往往会弹出智能提示。输入框为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上面。这个未测试过，不过理论上应该也是可行的。