<button> element not propagating events in Firefox?
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 h开发者_开发技巧ave 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
, thengot 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?
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).
精彩评论