按钮内嵌套img元素为何无法触发onclick绑定的脚本？

你遇到的核心问题是事件目标的判断逻辑偏差：当点击button内部的img元素时，event.target指向的是img而非button，这会导致两个直观问题：

1. 虽然button的onclick事件会通过事件冒泡触发myFunction1，但紧接着window的click监听会因为!event.target.matches('.rightmenubtn02')为true，立刻关闭下拉菜单，看起来像是点击img没触发任何效果；
2. 原本的判断逻辑只认button本身为合法点击目标，忽略了它的子元素，导致下拉菜单的关闭逻辑误触发。

我们需要修改window的click监听条件，不要仅判断event.target是否是button，而是通过Element.closest()方法，检查点击目标是否属于button元素（包括button本身和它的所有子元素）。这个方法会从当前元素向上遍历DOM树，直到找到匹配选择器的元素，完美解决子元素点击的判断问题。

修改后的JavaScript代码 #

function myFunction1() { 
  document.getElementById("rightdrop02").classList.toggle("show"); 
}

window.addEventListener('click', function(event) {
  // 检查点击目标是否是.rightmenubtn02或者它的子元素
  if (!event.target.closest('.rightmenubtn02')) {
    var dropdowns = document.getElementsByClassName("right_content02");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
});

可选优化（增强体验） #

如果希望点击img时完全等同于点击button本身，还可以给img添加样式，让它不拦截点击事件，直接穿透到父元素：

.rightmenubtn02 img {
  pointer-events: none; /* 点击img时直接触发父button的事件 */
}

这样修改后，不管点击button的文字还是内部的img，都能正常触发下拉菜单的切换，同时window的click事件也不会错误地关闭菜单。

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