参考链接:/weixin_43233914/article/details/85133839
效果
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>点击其他地方关闭弹窗div</title><script src="./js/jquery.min.js"></script><style>.none {display: none;}.choose-box {position: absolute;top: 35px;width: 220px;height: 200px;background-color: #fff;border: 1px solid #ddd;border-radius: 5px;box-shadow: 1px 1px 1px #ddd;z-index: 2;}.choose-box input {width: 180px;padding: 5px;margin: 50px 10px 20px;}.choose-box .trangle {position: absolute;top: -6px;left: 15px;border-right: 6px solid transparent;border-bottom: 6px solid #ddd;border-left: 6px solid transparent;}.choose-box .search_btn {width: 60px;height: 35px;margin: 0 auto;line-height: 35px;text-align: center;border-radius: 10px;border: 1px solid #fff;background-image: linear-gradient(120deg, #6cbaca 0%, #2C9DA1 100%);color: rgba(255, 255, 255, 0.966);font-weight: bold;box-shadow: 1px 1px 2px gray;}</style></head><body><div class="container"><div class="show-box-btn">点击出现弹窗</div><div class="choose-box none"><div class="trangle"></div><input class="username-input" type="text" placeholder="请输入xxxx"><div class="search_btn">确 定</div></div></div><script>$(".show-box-btn").on('click', function () {$(".choose-box").toggleClass("none");})// 点击“确定”按钮关闭弹窗$(".search_btn").on('click', function () {$(".choose-box").addClass("none");})// 点击除弹窗意外的其他部分时关闭弹窗$(document).on('click', function (e) {if ($(e.target).closest('.container').length > 0) {// alert('弹出框内部被点击了');} else {// alert('弹出框以外的部分被点击了');// 关闭弹框$('.choose-box').addClass("none");// $('.choose-box').hide();}})</script></body></html>
关键代码：
表面上好像是实现了，但是好像其中还涉及到冒泡啥的我还没搞清楚。
以上代码其实点击其他地方关闭弹窗后，再点击任意地方还是会调用函数，会执行alert('弹出框以外的部分被点击了');
closest()方法
closest() 方法返回被选元素的第一个祖先元素。就是我们从这个元素开始，进行向上遍历，直到找到我们要找的元素，遍历停止，也就是说寻找第一个祖先元素。
