javascript - Firefox 表单输入/div 内标签行为

Question

我正在通过 javascript 提交表单作为标签点击的回调。它适用于除 Firefox 之外的所有浏览器，我目前正在 FF24 上进行测试。

这是标签结构:

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

这是提交父表单的(伪)代码:

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

如您所见，代码已针对 FF 修复，因此我并不是真正在寻找解决方案，而只是想或多或少地详细解释为什么必须使用额外代码才能使脚本在 FF 中运行。我已经知道 radio 输入被检查，否则“为时已晚”。

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