移动端导航按钮内嵌图片点击无响应，如何实现图片触发按钮功能？

你的问题核心是点击按钮内的图片时，事件目标是<img>而非按钮本身，导致两处逻辑冲突：

1. 按钮的onclick虽会因事件冒泡执行，但随后触发的window.onclick逻辑会因为event.target不匹配.menu-button，直接关闭刚打开的导航栏；
2. 视觉上看起来点击图片没反应，实际是导航栏打开后立刻被关闭了。

下面是几种简单可行的解决方法：

方法1：修改全局点击事件的判断逻辑（推荐） #

用Element.closest()方法替代直接匹配event.target，它会从当前元素向上遍历DOM树，找到第一个匹配选择器的元素。这样不管点击的是按钮还是内部的图片，都能识别为点击了按钮区域。

修改后的JS代码：

function Menu() {
  document.getElementById("phone-nav-bar").classList.toggle("show-nav-bar");
}

// 点击外部关闭导航栏
window.onclick = function(event) {
  // 判断点击目标是否不在菜单按钮内，且不在导航栏内
  if (!event.target.closest('.menu-button') && !event.target.closest('#phone-nav-bar')) {
    var navBar = document.getElementById("phone-nav-bar");
    if (navBar.classList.contains('show-nav-bar')) {
      navBar.classList.remove('show-nav-bar');
    }
  }
}

额外优化：新增对导航栏的判断，避免点击导航栏内的元素时误关闭菜单。

方法2：直接给图片绑定点击事件 #

在<img>标签上直接调用Menu()函数，同时阻止事件冒泡避免重复执行：

<button class="menu-button" onclick="Menu()">
  <img src="assets/images/menu.png" onclick="Menu(); event.stopPropagation();">
</button>

这种方法简单直接，但需要额外维护图片的点击事件，灵活性不如方法1。

方法3：用CSS让图片铺满按钮（配合方法1效果更好） #

给图片添加样式，让它完全覆盖按钮区域，点击图片就等同于点击按钮：

.menu-button {
  padding: 0; /* 去掉按钮默认内边距 */
  border: none; /* 可选，根据你的样式调整 */
}
.menu-button img {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

这样图片占满按钮后，点击图片的事件会自然冒泡到按钮的onclick，再结合方法1的全局判断，就能完美解决问题。

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