Span внутри кнопки не активируется

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

Установка события click на button позволит этому событию всплыть и быть пойманным кнопкой, когда оно фактически инициируется дочерними элементами.

Но, конечно, есливстроенный элемент, как и элемент 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>