Javascript 选中复选框后调用body.addEventListener

我对addEventListener回复中的行为感到困惑

您可以看到一个名为“MyProfile”的复选框标签和一个弹出窗口，如果复选框被选中，就会通过CSS的魔力显示出来。 我试图使它消失，如果弹出窗口显示和用户点击以外的弹出分区

但我无法让它工作的原因是，如果您先单击id为“header profile popup toggler”的标签Body.addEventListener，然后单击bbb2.addEventListener（复选框），然后再次调用Body.addEventListener

但是如果在标签Body外部单击，则只调用一次addEventListener，这与我单击bbb.addEventListener（div）相同

是否有人知道body.addEventListener在bbb2.addEventListener之后被调用的原因

---

请解释

当然，我只会打电话

document.body.addEventListener('click', function(e){
   if(bbb2.checked==true&&e.target!=bbb){
       bbb2.checked=false;
   }
});

仅当弹出窗口显示（bbb2.checked==true）并且您在div外部单击（e.target！=bbb）时，取消选中复选框

但是，由于body.addEventListener在bbb2.addEventListener之后再次调用，并且这两个语句都为true-复选框被选中，并且复选框位于弹出div之外-复选框被取消选中

谢谢你的支持

---

我明白了

由于复选框有一个标签，因此会为每个元素调用addEventListener，在这种情况下，只需单击一下标签和复选框

因此，首先调用Label事件，然后调用Body。之后，将触发复选框事件和Body事件

我明白了

由于复选框有一个标签，因此会为每个元素调用addEventListener，在这种情况下，只需单击一下标签和复选框

因此，首先调用Label事件，然后调用Body。之后，将触发复选框事件和Body事件

使用以下脚本，我创建了一个功能齐全的弹出菜单，如果禁用Javascript，该菜单也可以工作：

var isOutSide = true,
bbb=document.getElementById('header-profile-popup'),
bbb2=document.getElementById('header-profile-popup-toggler'),
bbb3=document.getElementById('header-profile-popup-toggler-label');
document.body.addEventListener('click', function(){
   if(isOutSide){
       document.getElementById("header-profile-popup-toggler").checked = false;
   }
   isOutSide = true;
});

bbb.addEventListener('click', function(){
   isOutSide = false;
});
bbb2.addEventListener('click', function(){
   isOutSide = false;
});
bbb3.addEventListener('click', function(){
   isOutSide = false;
});

---

在上，您可以实际测试它

请将您的解决方案作为问题的答案发布，并将其标记为正确的解决方案。这将使此问题不再显示为未解决，并使具有类似问题的人更容易快速找到解决方案。如果您解决了问题，请将您的答案标记为已接受！你不能在24小时内接受自己的答案。那我就做