Question

我有一个<input>，当关注它时会显示建议下拉。点击其他任何内容后，建议就会消失。问题是我似乎无法做到这一点，以便在点击建议<div>时，模糊事件不会运行。

下面是一些HTML：

<label id="testTagsLabel">Tags:</label>
<input type="text" name="tags" id="testTags" placeholder="Ex: Poem, Edgar Allen Poe">
<div id="tagSuggest">
<ul>
<li class="tagSuggestTag">testtag</li>
<li class="tagSuggestTag">testtag2</li>
<li class="tagSuggestTag">testtag3</li>
<li class="tagSuggestTag">testtag4</li>
</ul>
</div>

以下是一些JavaScript：

  $('#testTags').focus(
     function(){
        $('#tagSuggest').show();
     });

  $('#testTags').blur(
     function(){
        $('#tagSuggest').hide();
     });

Answer 1

尝试类似：

$("#yourinput").blur(function(e) {
    if(!$(e.target).is(".suggestDiv")) {
        // close the suggest div
    }
});

更新：（哎呀，上面的代码无法正常工作）

这应该有效：

$(document).click(function(e) {
    if (!$(e.target).is("#suggest")) {
        $("#suggest").hide();
    }
});

演示：http://jsfiddle.net/PNVCL/

<强> UPDATE2：

我忘记了你仍然需要模糊，因为当你通过点击标签切换到另一个输入时你可能想要隐藏建议div。这是一个更新的演示：http://jsfiddle.net/PNVCL/1/

单击任何地方仍会关闭建议div（建议div本身或输入除外）以及按Tab键切换到另一个输入。仍然需要改进，但你应该可以从这里拿起。

Answer 2

您不应该使用模糊事件，因为无法区分由于单击建议框而导致的模糊和另一个模糊（标签，窗口模糊，右键单击......）。

@dakis给出的解决方法是使用文档上的click事件，但使用建议框关闭该框。我建议动态添加和删除文档单击处理程序以避免开销，并允许用户在不关闭框的情况下单击该字段。

在这里演示：http://jsfiddle.net/fvwPn/

此外，我在按下TAB时关闭了该框。我还添加了一个脏黑客版本（注释），它使用模糊事件和使用超时的大黑客（因为两个事件是独立激发的，延迟取决于客户端浏览器和速度......是的，这是一个肮脏的黑客）。

如何从触发jQuery模糊事件中排除页面元素？

2 个答案: