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

Question

我有以下 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"> 将在每次点击其中的元素时隐藏。

Answer 1

您可以使用以下代码简单地关闭模糊事件。

$(document).off("blur", "#txtSearchTerm");

Answer 2

你不需要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>

Answer 3

你不能这样做，因为在点击孩子之前会触发模糊。 因此，您需要在关闭结果的文档上添加一个事件处理程序。当有人单击结果时，您取消该事件。像这样的：

$('#txtSearchTerm').click(function(e) {
  $('#searchResult').show();
  e.stopPropagation();
});

$(document).click(function(e) {
    $('#searchResult').hide();
});

$('#searchResult').click(function(e) {
  e.stopPropagation();
});

<script src="//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>

Answer 4

我建议它仅在用户单击某些元素时检查相关目标并消除模糊。

$(document).on("blur", "#txtSearchTerm", function (e) {
  if ($(e.relatedTarget).hasClass("no-blur")){
  }else{
  $('#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>