使用 jQuery 在外部单击时隐藏 div - Javascript

简介

本文将介绍使用 jQuery 实现在外部单击时隐藏 div 的方法。这个功能在编写网页时非常常见，譬如下拉菜单、提示框等需要在点击外部区域时自动关闭。

解决方案

我们可以使用 jQuery 提供的事件绑定方法，在 div 以外的区域进行单击事件监听，然后再执行隐藏 div 的操作。

首先，我们需要给待隐藏的 div 绑定一个点击事件，这个事件可以用来阻止事件冒泡，避免点击 div 时触发 body 的单击事件。

$(document).on('click', '.target-div', function(event) {
  event.stopPropagation();
  // other logics
});

接着，我们需要给 body 绑定一个单击事件监听器。在监听器的回调函数中，我们需要判断单击事件的触发元素是否在待隐藏的 div 区域内，如果是则什么也不做，否则就执行隐藏 div 的操作。

$(document).on('click', function(event) {
  if (!$(event.target).closest('.target-div').length) {
    // 隐藏 .target-div 的代码
  }
});

在上面的代码中，$(event.target) 表示单击事件的触发元素，closest('.target-div') 表示查找最近的（当前元素或者祖先元素中的）.target-div 元素，如果存在则返回该元素，否则返回空数组。

最后，我们只需要在隐藏 div 的代码中加入合适的显示和隐藏动画效果即可。

完整代码

$(document).on('click', '.target-div', function(event) {
  event.stopPropagation();
  // other logics
});

$(document).on('click', function(event) {
  if (!$(event.target).closest('.target-div').length) {
    $('.target-div').fadeOut();
  }
});