如果用户在 div 外部单击，请删除类

Question

我有一个搜索输入，我隐藏了提交按钮。相反，当用户按 Enter 时，将显示一个下拉列表，其中包含使用以下 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类？

Answer 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()

Answer 2

你能试试这个吗，

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