HTML按钮点击内部文本/图片时onClick事件不触发的解决方法

首先得说清楚：默认情况下，点击按钮里的文本、图片这类子元素，事件是会冒泡到父按钮的，理应触发按钮的onClick事件。你现在遇到的情况，大概率是子元素的事件被阻止了冒泡，或者有其他代码干扰了事件传递。下面给你几种实用的解决办法：

方法1：移除子元素的事件阻止代码 #

先检查图片或文本元素的JS代码，看看有没有类似这样的内容：

// 假设是图片元素的事件绑定
document.querySelector('.legendaicon').addEventListener('click', function(e) {
  e.stopPropagation(); // 这行代码会把事件拦在子元素，不让它冒泡到父按钮
});

如果找到了，直接删掉e.stopPropagation()这一行就行，这样点击子元素时事件就能正常传到按钮，触发dropdown()函数。

方法2：给子元素绑定同一个点击事件 #

要是不想动现有代码，或者不确定问题出在哪，最简单粗暴的方式就是直接给按钮内的图片和文本也绑定dropdown()：
修改后的HTML代码大概是这样：

<button onclick="dropdown()" class="ui-button ui-widget ui-corner-all dropbtn">
  <img onclick="dropdown()" class="legendaicon" src="你的图片地址">
  <span onclick="dropdown()">Legenda</span>
</button>

这样不管点按钮空白区、图片还是文本，都会触发目标函数。

方法3：用事件委托实现更优雅的绑定 #

可以把事件绑定在按钮上，不管点击的是按钮本身还是内部子元素，都执行函数。这种方式不用给每个子元素单独绑事件，代码更整洁：

// 替换HTML里的内联onclick，用JS绑定事件
document.querySelector('.dropbtn').addEventListener('click', function() {
  dropdown();
});

只要子元素没有用e.stopImmediatePropagation()完全阻断事件，这个方法就能生效。

方法4：检查CSS的pointer-events属性 #

要是你的图片或文本元素被设置了pointer-events: none，点击它们会直接穿透到下层，但不会触发自身或父元素的点击事件。可以检查子元素的CSS：

.legendaicon, .dropbtn span {
  pointer-events: auto; /* 默认就是auto，确保没被改成none或其他值 */
}

如果之前设成了none，改回auto就能让点击事件正常触发。

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