jquery - 如果用户点击 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()