javascript - 元素不在 Firefox 中传播事件？

Question

我在 Firefox 4.0.1 中看到事件传播似乎没有按我预期的方式工作的问题。假设我有以下 HTML:

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

和 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;
    });
});

参见:http://jsfiddle.net/H7fp3/10/

这在 Chrome (12) 和 Safari (5.0.5) 中的表现与我预期的一样:

• 点击复选框产生:got click: checkbox，然后got click: button
• 单独点击按钮，产生:got click: button

但是，在 Firefox (4.0.1) 中，两者都生成 got click: button 并且不更改复选框 checked 属性。我在这里错过了什么吗？ Firefox 是否正确传播按钮点击事件？

Answer 1

我想说 Firefox 实际上就在这里。根据W3C's validation tool , <input>不允许进入 <button> .

此外，checked="true"应该是 checked="checked" ，这也可能导致问题(或可能在其他情况下导致问题)。