FireFox Button Player and li are not clickable or floating

Question

I have a dialog that loads via ajax. Inside there is a series of buttons. I added children to these buttons, which are elements that can be clicked. These are the elements of LI and SPAN. Hang event - pseudo-selector: hover over children. There are also click events related to these children. This works fine in Chrome, but FireFox doesn't work. Neither freezing nor clicking events are triggered. Is it just locked with a button?

Answer 1

Short answer to your question: Yes.

Clicking on children will not work because it is inside a button. The button is not intended for a container for children - only for text.

Try it. You will find that he will always tell you that you pressed the button.

<button type="button" onclick="alert('You clicked the button!');">
    <p onclick="alert('You clicked the p!');">Hello</p>
    <a href="#" onclick="alert('You clicked the a!');">Hi</a>
</button>

Demo