当用户点击它的外部时如何用jQuery隐藏一个div

当用户点击某个元素的外部时，有多种方法可以使用 jQuery 隐藏一个 div。下面是两种实现方法的示例：

方法一：使用 click() 和 closest() 方法

这种方法适用于只要用户点击了页面上的任何元素就隐藏某个 div。可以将 click() 事件绑定到 document 上，同时使用 closest() 方法来判断被点击的元素是否包含需要隐藏的 div，如果不包含的话就隐藏它。

$(document).click(function(event) {
  if (!$(event.target).closest('#myDiv').length) {
    $('#myDiv').hide();
  }
});

在上面的代码中，如果 event.target 元素不包含 id 为 "myDiv" 的元素，则通过调用 hide() 方法隐藏该元素。

方法二：使用 mouseup() 和 blur() 方法

这种方法只有在用户点击页面上的某个元素并移除焦点时才隐藏某个 div。可以将 mouseup() 事件绑定到 document 上，并使用 blur() 方法来判断离开焦点的元素是否包含需要隐藏的 div，如果不包含的话就隐藏它。

$(document).mouseup(function(event) {
  var myDiv = $('#myDiv');
  if (!myDiv.is(event.target) && myDiv.has(event.target).length === 0) {
    myDiv.hide();
  }
}).on('blur', '#myDiv :input', function() {
  $('#myDiv').hide();
});

在上面的代码中，如果点击的元素不是 id 为 "myDiv" 的元素，也不是 "myDiv" 元素内的任何子元素，则通过调用 hide() 方法隐藏该元素。另外，当 "myDiv" 元素内的 input 元素失去焦点时，也会调用 hide() 方法来隐藏该元素。