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

我有一个

，当关注它时，会显示一个建议下拉列表。单击任何其他内容时，建议将消失。问题是，我似乎无法找到使其在单击“建议

时不运行模糊事件的方法

以下是一些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>

尝试以下方法：

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

更新：（哎呀，上面的代码不像我想象的那样工作）

这应该起作用：

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

演示：

更新2:

我忘记了您仍然需要blur，因为当您通过点击tab切换到另一个输入时，您可能想要隐藏suggest div。这里有一个更新的演示：

---

单击任意位置仍将关闭建议div（建议div本身或输入上的除外），并单击选项卡切换到另一个输入。仍然需要改进，但您应该能够从这里开始学习。

您不应该使用模糊事件，因为无法区分单击“建议”框造成的模糊和另一种模糊（选项卡、窗口模糊、右键单击……）

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

此处演示：

---

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

@guidhouse刚刚添加了它不起作用，因为e.target总是模糊事件的输入。哎呀，我脑子里的想法是对的，但“措辞”是错的。随演示一起更新了答案当弹出窗口显示/隐藏时，您应该绑定/解除绑定文档事件侦听器，并将输入本身包含在排除中。谢谢，经过一点编辑（来自@Pierre suggestion），我已启动并运行。再次更新了答案。仍然需要改进，但应该足以启动和运行OP我在最新的JSFIDLE修订版中也做了同样的事情：）投票支持您的努力和评论一个问题，为什么您认为有必要动态添加/删除文档事件侦听器？在我的示例中，它只添加一次，当DOM准备就绪时，因为每次用户都会单击文档，即使没有显示该框，它也会尝试隐藏它。想象一下页面中的每个小部件都做同样的事情，它可能会成为大型应用程序的一个问题。更糟糕的是，如果在另一个上下文中使用同一个框，单击会意外地将其隐藏。

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