Missing click event for <span> inside <button> element on firefox

You have to add the pointer-events property to the span element.

button span {
  pointer-events: none;
}

As far as i known clicking the children elements won't work because it is nested inside a button. A button is not container for child elements - only for text.

If you try like below it always tell that you clicked the button.

<button type="button" onclick="alert('You clicked the button!');">
   inside a button <span onClick="alert('clicked span');">**Not working**</span>
</button>

So, my suggestion is to use another span or a div

<div class="button_replace">
  inside a div <span onClick="alert('clicked span');">**working**</span>
</div>

Hope it helps...

Note: Your code will work in chrome but not in firefox and my answer is alternative solution for making work in firefox

Add a pointer-event to your button in css like:

button span {
    pointer-events: none;
}

Clicks on the button element will be ignored