<button> element not propagating events in Firefox?

Question

I'm seeing issues in Firefox 4.0.1 where event propagation does not seem to be working the way I would expect. Let's say I have the following HTML:

<button>
    <input id='cb' type='checkbox' checked='true'>
    <span> foo</span>
</button>

and JavaScript:

$(document).ready(function() {
    $("button").click(function(e) {
        console.log('got click: button');
        return true;
    });
    $("#cb").click(function(e) {
        console.log('got click: checkbox');
        return true;
    });
});

See: http://jsfiddle.net/H7fp3/10/

This behaves as I would expect in Chrome (12), and Safari (5.0.5):

• Click on the checkbox produces: got click: checkbox, then got click: button
• Click on the button alone, produces: got click: button

However, in Firefox (4.0.1) both produce got click: button and do not alter the checkbox checked attribute. Am I missing something here? Is Firefox propagating button click events correctly?

Answer 1

I'd say Firefox is actually in the right here. According to the W3C's validation tool, <input> isn't allowed inside <button>.

Also, checked="true" should be checked="checked", which might also be causing issues (or could potentially cause issues in other contexts).