FireFox Button child span and li not clickable or hoverable

Question

I have an dialog that is loaded via ajax. Inside there are a series of buttons. I added children to these buttons that are the clickable elements. These are LI and SPAN elements. The hover event is a pseudo selector :hover on the children. There are click events bound to these children as well. This works fine on Chrome but FireFox does not work. Neither hover nor the click events are triggered. Is this simply getting blocked by the button?

Answer 1

The short answer to your question: Yes.

Clicking the children elements won't work because it's inside a button. A button is not tailored to be a container for child elements - only for text.

Try this out. You'll find that it would always tell you that you clicked 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

Answer 2

Why a button as wrapper if it is the content that is clickable?

"Clicking the children elements won't work because it's inside a button. A button is not tailored to be a container for child elements - only for text." seems incorrect

If both wrapper and children need to be clickable with different event handling functions, or different arguments to pass through to the handler, you could use event.stopPropagation to avoid the click event being handled by both child and wrapper button. You can nest buttons as far as I know.

I came here having a list (ul) in a button, the li's are not clickable, but just button content. That works fine, except when using an emulator which is scaled at a level different then 100%. I used IPad emulator, scaled to 60%, in Chrome.

The tap location is incorrect : it is on the button I tap, but when using inspect element (in google chrome) the selected HTML element is not the button, child ul or li, but the element next to that wrapping button. Same with my bootstrap navbar : it inspects the wrong nav-item. Scaling the emulator to 100% and everything works as expected.