javascript - 如何在某些选择器上禁用jQuery模糊事件

我有以下jQuery和HTML，它们在失去对输入的关注时隐藏了搜索结果。

单击#searchResult上的元素时，此代码将ID为#searchResult的div隐藏起来。当单击#searchResult div上的元素时，我想禁用模糊。基本上，我想在焦点丢失时隐藏<div id="searchResult">，并在焦点对准时显示。我该如何实现？

$(document).on("blur", "#txtSearchTerm", function () {
    $('#searchResult').hide();
});

$(document).on("focus", "#txtSearchTerm", function () {
    $('#searchResult').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">

<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">Click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">Click here</div>
           </a>
        </li>
    </ul>
</div>

每次单击内部元素时， <div id="searchResult">将被隐藏。

最佳答案

您不需要blur事件来实现:

$(document).click(function(e) {
    if ($(e.target).is("div") && $(e.target).has("ul > li")){
        $('#searchResult').show()
    }
    else $('#searchResult').hide()

    if ($(e.target).is(':focus')){
        $('#searchResult').show()
    }
})

#searchResult{
    margin-top: 50px;
    border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
Click out the input to hide div
<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">click here</div>
           </a>
        </li>
    </ul>
</div>