Javascript Span内部按钮不可单击

我有一个带有跨度的按钮，用于显示fa图标：

<button class="menu" onclick="showMenu()">
  <span class="fa fa-bars fa-1x"></span>
</button>

当我点击按钮时，javascript函数“showMenu”被执行。但是，当我单击fa图标（在按钮内部）时，该函数不会执行。从外观上看，fa图标确实是/应该是按钮的一部分

看起来，只有fa图标周围的按钮填充区域而不是fa图标本身对单击和执行javascript函数敏感

---

我怎样才能在HTML中有一个内有fa图标的按钮，我可以在按钮内的任何地方单击，然后执行该功能？

在

按钮上设置
单击
事件将允许事件冒泡，并在实际由子元素触发时被按钮捕获

但是，当然，如果一个内联元素，比如
span
元素是空的，那么它在屏幕上就不会占据任何空间，因此，如果事件附加到它，它就不能被触发


document.querySelector（“按钮”）.addEventListener（“单击”），函数（evt）{
console.log（“点击”+evt.target）；
});
按钮{宽度：100px；高度：50px；}

X
您需要提供一个。目前，您的按钮中根本没有内容，只是一个不占用任何空间的空白区域。旁注：您需要为按钮提供内容，即使您不希望它可见。这是可访问性法规遵从性所必需的。使用span单击内部按钮工作正常，共享js代码以正确调试问题如果？为什么？问题中的代码清楚地将事件附加到按钮上，请注意
onclick=“showMenu（）”
，因此没有if。因此，我不确定这是否是对问题的正确回答，尽管提供的信息是正确的，并有很好的解释。