Javascript 使用addEventListener添加带参数的回调时出错

我使用

addEventListener

添加带有参数的回调，但出现了一些问题

我使用覆盖实现了一个模态对话框组件： 单击按钮时，将显示模式。 单击“覆盖”时，模式将消失

html:

单击我以显示公共模式
这是一个常见的模态

css:

.modal{
显示：无；
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
z指数：900；
}
.模态.模态叠加{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：#fff；
z指数：910；
}
.模态.模态内容{
填充：20px；
边框：1px实心#000；
边界半径：5px；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
z指数：920；
}

js:

const commonBtn=document.querySelector（'.common btn'）；
const commonModal=document.querySelector（'.modal.common'）；
功能切换模式（modalEle）{
log（'调用func'）；
const preModalDisplay=modalEle.style.display；
if（前置模式显示==='block'）{
modalEle.style.display='none'；
莫达莱尔
.querySelector（“.modal overlay”）
.removeEventListener（'单击'，（）=>{
切换模式（modalEle）；
});
}否则{
modalEle.style.display='block'；
modalEle.querySelector（'.modal overlay'）。addEventListener（'click'，（）=>{
切换模式（modalEle）；
});
}
}
commonBtn.addEventListener（'单击'，（）=>{
切换模式（commonModal）；
});

预期结果应为：

click on btn: display
click on overlay: disappear
click on btn: display
click on overlay: disappear
click on btn: display
click on overlay: disappear
...

但实际结果是：

click on btn: display
click on overlay: disappear
click on btn: display
click on overlay: still display, and the callback func is called twice

---

回拨有问题，有人能告诉我是什么问题吗？谢谢。

您必须在

removeEventListener

中删除与使用

addEventListener

添加的函数完全相同的引用。通过使用两个内联箭头函数，可以创建两个单独的函数。您可以尝试将该箭头函数提取为一个单独的函数（在

togglemodal

之外）。我不会将此作为答案发布，因为我相信这基本上就是这里的问题：可能的重复，我认为您的

覆盖

将仅在模式打开时显示，因此无需继续添加和删除事件侦听器。您可以采用与

commonBtn

相同的方法（添加一次）您必须删除与

removeEventListener

中使用

addEventListener

添加的函数完全相同的引用。通过使用两个内联箭头函数，可以创建两个单独的函数。您可以尝试将该箭头函数提取为一个单独的函数（在

togglemodal

之外）。我不会将此作为答案发布，因为我相信这基本上就是这里的问题：可能的重复，我认为您的

覆盖

将仅在模式打开时显示，因此无需继续添加和删除事件侦听器。您可以按照与

commonBtn

相同的方式进行操作（添加一次）