开发者

<button> element not propagating events in Firefox?

开发者 https://www.devze.com 2023-03-12 17:18 出处:网络
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:

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, 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?


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).

0

精彩评论

暂无评论...
验证码 换一张
取 消