javascript - 缺少点击事件，因为模糊事件隐藏了元素

Question

我正在实现“自动建议功能”。这意味着:

• 输入元素获得焦点 -> 显示建议
• 输入元素失去焦点 -> 隐藏建议

但是如果用户想通过鼠标选择一个选项，则不会触发 click 事件，因为 blur 事件会提前触发并隐藏可点击元素。

这是 fiddle : http://jsfiddle.net/km8c0ft1/

下面是一些示例代码: js:

$('#test').blur(function() {
    $('#dropdown').css("display", "none");
});
$('#test').focus(function() {
    $('#dropdown').css("display", "inline");
});

html:

<input id="test" />
<input />
<input />

<ul id="dropdown" style="display: none">
    <li><a onclick="alert('option 1 selected')">option 1</a></li>
    <li><a onclick="alert('option 2 selected')">option 2</a></li>
    <li><a onclick="alert('option 3 selected')">option 3</a></li>
</ul>

我明白这个问题。但是解决这个问题的最佳做法是什么？ 我可以实现 setTimeout 函数来等待一些毫秒，直到我隐藏菜单。但这感觉像是 hack 而不是干净的解决方案。

Answer 1

试试这个:你可以使用 show()或 hide()而不是更改 css 值。为里面的anchor绑定(bind)点击事件li将所选值设置为文本框。为文档绑定(bind)点击事件，判断目标是否为输入框隐藏选项。

$('#dropdown li a').click(function(e) {
    $('#test').val($(this).text());
    $('#dropdown').hide();
});

$(document).on("focus click keydown blur","*",function(e){
    var keyCode = e.keyCode || e.which; 
    if(keyCode == 9 || e.target.id!='test')
    $('#dropdown').hide();
});

$('#test').on("focus click",function(e) {
    $('#dropdown').show();
});

DEMO with Single Input
<强> DEMO with Multiple Input