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中运行。我已经知道无线电输入会被“检查得太晚”。

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

Firefox在标签行为中形成输入/ div

1 个答案: