javascript - 使用 addEventListener 添加带参数的回调时出现问题

Question

我用addEventListener参数添加回调，但有问题

我实现了一个带有覆盖的模态对话框组件：单击按钮时，将显示模态。单击叠加时，模态将消失。

html:

<button class="common-btn">Click me to show a common modal</button>
<div class="modal common">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div>This is a common modal</div>
    </div>
</div>

CSS：

.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
}

.modal .modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 910;
}

.modal .modal-content {
  padding: 20px;
  border: 1px solid #000;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  z-index: 920;
}

js：

const commonBtn = document.querySelector('.common-btn');
const commonModal = document.querySelector('.modal.common');

function toggleModal(modalEle) {
    console.log('func is called');
    const preModalDisplay = modalEle.style.display;
    if (preModalDisplay === 'block') {
        modalEle.style.display = 'none';
        modalEle
            .querySelector('.modal-overlay')
            .removeEventListener('click', () => {
                toggleModal(modalEle);
            });
    } else {
        modalEle.style.display = 'block';
        modalEle.querySelector('.modal-overlay').addEventListener('click', () => {
            toggleModal(modalEle);
        });
    }
}

commonBtn.addEventListener('click', () => {
    toggleModal(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

回调有问题，谁能告诉我是什么问题？谢谢。

标签： javascriptaddeventlistener