window.addEventListener失效及按钮点击下拉异常问题求助

我帮你分析下问题出在哪，以及怎么解决：

你的核心问题是事件冒泡加上目标元素判断不准确导致的：

• 当你点击按钮内部的<img>或者<br>标签时，event.target并不是.icon-button本身，这会触发window的点击事件里的关闭逻辑，刚打开菜单就立刻关掉了；
• 另外，即使直接点击按钮，事件冒泡到window后也可能因为嵌套元素的判断问题出现冲突。

第一步：修正window点击事件的目标判断 #

把原来只判断event.target是否匹配.icon-button的逻辑，改成检查点击的元素是否属于.icon-button（包括它的子元素），用closest()方法就能实现：

window.addEventListener('click', function(event){
  // 检查点击的元素是不是按钮本身或者按钮的子元素
  const isButtonClick = event.target.closest('.icon-button') !== null;
  if (!isButtonClick){
    var dropdowns = document.getElementsByClassName("main-options");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].style.display === "block") {
        dropdowns[i].style.display ="none";
        document.getElementById("mainmenu").style.marginLeft = "80px";
        document.body.style.backgroundColor = "#fff";
      }
    }
  }
});

第二步：阻止菜单点击事件的冒泡（更稳妥） #

在menu函数里添加evt.stopPropagation()，这样点击按钮时事件不会往上冒泡到window，彻底避免冲突：

function menu(evt, id) {
  // 阻止事件冒泡到window，避免触发关闭逻辑
  evt.stopPropagation();
  
  document.querySelectorAll(".main-options").forEach(function(div) {
    if (div.id === id) {
      // 切换目标菜单的显示状态
      if(div.style.display === "block"){
        div.style.display = "none";
        document.getElementById("mainmenu").style.marginLeft = "80px";
        document.body.style.backgroundColor = "#fff";
      }else{
        div.style.display = "block";
        document.getElementById("mainmenu").style.marginLeft = "230px";
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
      }
    } else {
      // 隐藏其他菜单
      div.style.display = "none";
    }
  });
}

额外优化建议（可选） #

直接操作style.display不太好维护，建议用CSS类来控制显示隐藏：

先加个CSS类：

.main-options {
  display: none;
}
.main-options.show {
  display: block;
}

然后修改JS代码：

function menu(evt, id) {
  evt.stopPropagation();
  
  document.querySelectorAll(".main-options").forEach(function(div) {
    if (div.id === id) {
      div.classList.toggle("show");
      // 同步调整其他样式
      if(div.classList.contains("show")){
        document.getElementById("mainmenu").style.marginLeft = "230px";
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
      }else{
        document.getElementById("mainmenu").style.marginLeft = "80px";
        document.body.style.backgroundColor = "#fff";
      }
    } else {
      div.classList.remove("show");
    }
  });
}

// window点击事件同步改成检查类名
window.addEventListener('click', function(event){
  const isButtonClick = event.target.closest('.icon-button') !== null;
  if (!isButtonClick){
    var dropdowns = document.getElementsByClassName("main-options");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].classList.contains("show")) {
        dropdowns[i].classList.remove("show");
        document.getElementById("mainmenu").style.marginLeft = "80px";
        document.body.style.backgroundColor = "#fff";
      }
    }
  }
});

这样代码逻辑更清晰，后续调整样式也更方便。

内容的提问来源于stack exchange，提问作者Lohitha Y