跨度内部按钮不可单击

Question

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

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

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

似乎是因为fa图标周围的按钮的填充区域而不是fa图标本身对单击敏感，并执行javascript函数。

如何在HTML中使用带有fa图标的按钮，以及如何在按钮内的任意位置单击并执行该函数？

Answer 1

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

但是，当然，如果内联元素（如span元素）为空，则它在屏幕上不占空间，因此，如果事件附加到该元素，则无法触发该事件。

 document.querySelector("button").addEventListener("click", function(evt){ console.log("clicked on " + evt.target); }); 

 button { width:100px; height:50px; } 

 <button class="menu"> <span class="fa fa-bars fa-1x">X</span> </button>