如果用户在 div 之外单击，则删除类答案

【问题标题】：Remove class if user clicks outside of div如果用户在 div 之外单击，则删除类
【发布时间】：2014-02-05 16:56:58
【问题描述】：

我有一个搜索输入，我隐藏了提交按钮。相反，当用户按下回车键时，会出现一个下拉菜单，其结果使用以下 js：

$(function() {
  $("form input").keypress(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
      $(this).next("#searchResult").addClass('show');
      return false;
    } else {
      return true;
    }
  });
});

如果用户在#searchResult之外点击，我如何确保.show的类被移除？

【问题讨论】：

视情况而定，是否应该在没有点击 div 的任何时候发生这种情况，或者如果 div 先有焦点，是否会发生这种情况？

标签： jquery search input

【解决方案1】：

您可以利用blur 事件来检测元素何时失去焦点：

$("#searchResult").on( "blur", function(){
  // The users focus is no longer on this element!
});

你也可以这样写：

$("#searchResult").blur( function(){
  // The users focus is no longer on this element!
});

这当然是假设#searchResult 元素一开始就有用户关注。

参考：

blur()

【讨论】：

【解决方案2】：

你可以试试这个，

 $("body:not(#searchResult)").click(function(){
     $("#searchResult").removeClass("show");
 });

【讨论】：

你应该在这里提到any点击，anywhere在元素之外anytime会触发回调并且删除该类（即使该类已被删除）。