javascript - 两个相互抵消的事件监听器 - JS。为什么？

Question

我有一个下拉菜单的事件监听器，它工作得很好：

JS

const selected = document.querySelectorAll(".selected");
const optionsContainer = document.querySelectorAll(".options-container");

for(let i = 0; i < selected.length; i++){
    selected[i].addEventListener("click", () => {
    optionsContainer[i].classList.toggle("open");
    selected[i].classList.toggle("open");
    for (let j = 0; j < selected.length; j++){
      if(i != j && selected[j].classList.contains("open")){
        optionsContainer[j].classList.toggle("open");
        selected[j].classList.toggle("open");
      }
    }
  });
}

但是，现在我还想在用户单击块外时关闭下拉菜单（这涉及切换 optionsContainer 和选中）。当然，此切换取决于下拉菜单是否也打开。这是我想出的JS：

window.addEventListener("click", ()=>{
  for(let i = 0; i < selected.length; i++){
    if(selected[i].classList.contains("open")){
      optionsContainer[i].classList.toggle("open");
      selected[i].classList.toggle("open");
    }
  } 
});

但是，当我使用这两种方法运行代码时，第一个事件侦听器也不会执行。

我认为这可能是因为点击菜单也算点击窗口，所以你切换两次并没有结果。但是，我仍然不确定...

标签： javascript