如何更好的编写使用jquery点击周边来关闭弹出窗口

Question

我想实现点击按钮的时候可以出现一个窗口，点击在窗口之外的时候可以关闭窗口，但是目前我是通过e.target来判断的。但是我觉得这样的书写方式并不理想，因为如果是在窗口里面的话，如果有很多对象的话，我似乎要写更多的e.target.className来完成要求，所以我想找一种更好更专业的书写方式!

另外，我希望我可以反复点击工具按钮来关闭和打开窗口，但是我不知道怎么写。我尝试使用切换方法，但仍然无法达到效果。我希望我能得到你的帮助，谢谢。

$(".tool").on("click", function (e) {
$(document).on("click", function (e) {
if (
e.target.className == "delet_wrap" ||
e.target.className == "consider" ||
e.target.className == "confirm" ||
e.target.className == "btn_group" ||
e.target.className == "tool" ||
e.target.className == "txt"
) {
$(".delet_wrap").css("display", "inline-block");
} else {
$(".delet_wrap").css("display", "none");
}
});
});

body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.tool {
position: relative;
text-decoration: none;
background-color: yellow;
border: 1px solid #222;
border-radius: 6px;
padding: 10px;
color: #222;
}
.tool .delet_wrap {
padding: 20px;
position: absolute;
bottom: -90px;
left: 10px;
background-color: #ccc;
border: 1px solid #222;
display: none;
}
.tool .delet_wrap p {
text-align: center;
}
.tool .delet_wrap .btn_group {
display: flex;
white-space: nowrap;
margin-top: 10px;
}
.tool .delet_wrap .btn_group .consider {
background-color: #fff;
border: 1px solid #222;
margin-right: 10px;
}
.tool .delet_wrap .btn_group .confirm {
text-decoration: none;
border: 1px solid #222;
margin-left: 10px;
background-color: #222;
color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:;" class="tool">tool
<div class="delet_wrap">
<p class="txt">Are you sure you want to remove?</p>
<div class="btn_group">
<button class="consider">consider</button>
<button class="confirm">confirm</button> 
</div>
</div>
</a>

Answer 1

首先，您不需要任何bloatware-jquery，您可以使用元素组合。匹配和元素。最靠近check click元素:

document.querySelectorAll(".tool").forEach(el => el.addEventListener("click", function (e) {
let node = e.target;

//check if clicked any buttons inside the popup
if (node.matches("button.consider"))
{
console.log(node.textContent);
return;
}

if (node.matches("button.confirm"))
{
console.log(node.textContent);
return;
}

//if popup element element exists as a child, the main button clicked
if (node = node.querySelector(".delet_wrap"))
{
//if popup already opened do nothing
if(node.style.display == "inline-block")
return;
document.body.click(); //close other popups
//show popup
node.style.display = "inline-block";
//create onClick function so we can remove listener later
const onClick = e =>
{
//hide popup
node.style.display = "none";
//remove listener
document.removeEventListener("click", onClick);
};
//add listener
document.addEventListener("click", onClick);
}
// stop propagation to prevent trigger document click
e.stopPropagation();
}));

body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.tool {
position: relative;
text-decoration: none;
background-color: yellow;
border: 1px solid #222;
border-radius: 6px;
padding: 10px;
color: #222;
}
.tool .delet_wrap {
padding: 20px;
position: absolute;
bottom: -90px;
left: 10px;
background-color: #ccc;
border: 1px solid #222;
display: none;
}
.tool .delet_wrap p {
text-align: center;
}
.tool .delet_wrap .btn_group {
display: flex;
white-space: nowrap;
margin-top: 10px;
}
.tool .delet_wrap .btn_group .consider {
background-color: #fff;
border: 1px solid #222;
margin-right: 10px;
}
.tool .delet_wrap .btn_group .confirm {
text-decoration: none;
border: 1px solid #222;
margin-left: 10px;
background-color: #222;
color: #fff;
}

<a href="javascript:;" class="tool">tool
<div class="delet_wrap">
<p class="txt">Are you sure you want to remove?</p>
<div class="btn_group">
<button class="consider">consider</button>
<button class="confirm">confirm</button> 
</div>
</div>
</a>
<a href="javascript:;" class="tool">tool 2
<div class="delet_wrap">
<p class="txt">Are you sure you want to remove? 2</p>
<div class="btn_group">
<button class="consider">consider 2</button>
<button class="confirm">confirm 2</button> 
</div>
</div>
</a>

Answer 2

您可以使用一个数组来保存这些，然后使用includes来确定:

const className = ['delet_wrap', 'consider', 'confirm', 'btn_group', 'tool', 'txt']
$(".tool").on("click", function (e) {
$(document).on("click", function (e) {
if (className.includes(e.target.className)) {
$(".delet_wrap").css("display", "inline-block");
} else {
$(".delet_wrap").css("display", "none");
}
});
});