由于失去焦点事件隐藏元素，导致点击事件丢失。

Question

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

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

但是，如果用户想通过鼠标选择某个选项，则点击事件不会触发，因为模糊事件会更早地触发并隐藏可点击的元素。

以下是代码示例，您可以在此处查看fiddle： http://jsfiddle.net/km8c0ft1/

$('#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，而不是一个清洁的解决方案。

- user3796786

---

这只是一个示例，用于展示问题。整个功能高度集成，现有的插件都无法满足我的需求。 - user3796786

Answer 1

尝试这个：您可以使用show()或hide()代替更改css值。将单击事件绑定到li内部的锚点，以将所选值设置为文本框。将单击事件绑定到文档并检查目标是否不是输入框以隐藏选项。

$('#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();
});

单输入演示
多输入演示

- Bhushan Kawadkar

---

$('#dropdown').hide(); 看起来比 $('#dropdown').css("display", "none"); 更好，而 e.target.id != 'test' 比 !$(e.target).is("#test") 快一点，但问题与 Rajaprabhu Aravindasamy 的答案相同。 - Regent

谢谢您的回答！但是，是的，选项卡的事情真的很重要，这就是为什么我使用了模糊事件。 - user3796786

请查看更新后的答案，现在选项卡也可以正常工作了。 - Bhushan Kawadkar

现在，这将适用于“tab”按钮的单个和多个输入，单个输入和多个输入。感谢@Regent指出这些问题 :) - Bhushan Kawadkar

谢谢！这看起来不错。还有一个补充：你不需要 keycode：if(e.target.id!='test')就足够了。 - user3796786