Question

我对addEventListener响应的行为感到困惑。

In this jsFiddle你可以看到一个名为“我的个人资料”的复选框的标签和一个弹出窗口，如果勾选了复选框，则会显示一下，通过CSS的魔力。如果显示弹出窗口并且用户在弹出式窗口外单击，我试图让它消失...

但我无法让它工作的原因是，如果你点击标签'id-header-profile-popup-toggler'首先是Body.addEventListener，那么bbb2.addEventListener（复选框）然后再一次调用Body.addEventListener。

但是如果你在Label Body.addEventListener外面点击只调用一次，就像我点击bbb.addEventListener（div）一样。

有人知道为什么在bbb2.addEventListener之后调用body.addEventListener吗？

解释。

当然，我只会打电话给

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

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

但是由于在bbb2.addEventListener之后再次调用body.addEventListener并且两个语句都为真 - 选中该复选框并且复选框位于弹出div之外 - 复选框将立即取消选中。

感谢您的支持！

我明白了！

由于复选框的标签已经封闭，因此为每个元素调用addEventListener，在这种情况下只需单击一次就可以使用Label和Checkbox。

因此，首先调用Label事件，然后调用Body。之后，Checkbox事件和身体事件再次被触发。

Answer 1

我明白了！

由于复选框的标签已经封闭，因此为每个元素调用addEventListener，在这种情况下只需单击一次就可以使用Label和Checkbox。

因此，首先调用Label事件，然后调用Body。之后，Checkbox事件和身体事件再次被触发。

使用以下脚本，我制作了一个功能齐全的弹出菜单，如果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;
});

在this Fiddle上，您可以在行动中对其进行测试

选中复选框后调用body.addEventListener

1 个答案: