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

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/

更新 2:

我忘了您还需要模糊，因为您可能想在通过点击选项卡切换到另一个输入时隐藏建议的 div。这是一个更新的演示:http://jsfiddle.net/PNVCL/1/

点击任何地方仍然会关闭建议 div(除了建议 div 本身或输入)以及点击选项卡切换到另一个输入。仍然需要改进，但您应该可以从这里开始学习。