Jquery 使用 focusout & on click together 不起作用答案

【问题标题】：Jquery using focusout & on click together doesn't workJquery 使用 focusout & on click together 不起作用
【发布时间】：2014-08-16 06:56:25
【问题描述】：

当我在输入中输入时，我试图实现结果，列表将下拉。如果单击列表，则会发出警报。同时如果 input 是 focus out ，它会隐藏列表。但问题是点击时，它不起作用。

$("input").on("keyup",function(){
$(".abc li").show();
});
$(".abc li").on("click",function(){
    alert("123");
});
$("input").focusout(function(){
$(".abc").find("li").hide();
});

参考我的代码 http://jsfiddle.net/8t7erade/

【问题讨论】：

jQuery .focusout / .click conflict的可能重复

标签： javascript jquery html

【解决方案1】：

您的 click 事件永远不会被调用，因为 li 在触发之前已被您的 focusout 事件隐藏。

您可以设置超时以允许注册点击：

$("input").focusout(function () {
    setTimeout(function () {
        $(".abc").find("li").hide()
    }, 100)
});

demo

【讨论】：

【解决方案2】：

如何设置（短）模糊（聚焦）超时？

像这样：

$("input").on("keyup",function(){
$(".abc li").show();
});
$(".abc li").on("click",function(){
    alert("123");
});
$("input").focusout(function(){
    setTimeout(function(){$(".abc").find("li").hide();}, 150);//i set 150 just as example

});

问题是首先出现模糊，此时元素被隐藏，鼠标事件被传递给其他（可见）元素。

【讨论】：