javascript - Firefox form inputs/divs inside label behaviour

Question

I am submitting a form via javascript as callback of a label click. It works on all browsers except Firefox, and I am currently testing on FF24.

This is the label structure:

<label>
    <input type="radio" name="itsname" value="1">
    <div>
        <img />
    </div>
    <div></div>
    <div><br></div>
    <div>
        <div>
            <div></div>
            <div>
                <span></span>
            </div>
        </div>
        <div>
            <div></div>
            <div>
                <span></span>
            </div>
        </div>
    </div>
</label>

And this is the (pseudo)code for submitting the parent form:

label.addEvent('click', function () {
    if(Browser.firefox) this.getChildren('input')[0].set('checked', true)
    this.getParents('form')[0].submit()
})

As you can see, the code is already fixed for FF, so I am not really looking for a solution but just for a more or less detailed explanation on why the additional code is mandatory for making the script work in FF. I already know the radio input gets checked "too late" otherwise.

Answer 1

这可能是一种竞争条件，表单.submit()劫持了默认标签行为并防止它冒泡到输入并更改其值。

http://jsfiddle.net/dimitar/mjLya/

var html = document.getElement('input[type=hidden]');
document.getElements('label input[type=radio] ! label').addEvent('click', function(){
    html.set('value', 'submitted with ' + this.getElement('input[type=radio]').get('checked'));
    this.getParent('form').submit();
});

在 FF 23 中，它回显了“提交错误”。实际上，在 Chrome 29 上也是如此。

以下更改，在提交前添加 10 毫秒延迟，似乎允许标签点击事件冒泡到输入并设置值：

var html = document.getElement('input[type=hidden]');
document.getElements('label input[type=radio] ! label').addEvent('click', function(){
    // you can do this:
    // this.getElement('input[type=radio]').set('checked', true);
    html.set('value', 'submitted with ' + this.getElement('input[type=radio]').get('checked'));
    var f = this.getParent('form');
    f.submit.delay(10, f);
});