Question

如果同时调用，则Onsubmit事件可以静默地终止onchange事件。我假设js引擎中的竞争条件。测试了chrome，FF3，FF6和IE9。

要重现，您需要更改输入内容并单击“提交”按钮。请勿在输入更改和提交按钮单击之间进行任何额外点击。

<div id="somediv">
    <div>one</div>
    <div>two</div>
</div>
<form method="POST" id="someform">
    <input type="text" name="input1" id="someinput" value="change me" />         
    <input type="submit" />
</form>
<script type="text/javascript">
    document.getElementById('someinput').onchange = function() {
        //some delay - DOM operations, AJAX or alert:
        document.getElementById('somediv').getElementsByTagName('div')[1].style.display = 'none';
        //or alert('123');
    }
    document.getElementById('someform').onsubmit = function() {
        alert('This event is not called');
    }
</script>

预期行为：onchange事件，而不是onsubmit。

如果我们使用按钮而不是一个接一个地提交和调用事件 - 一切都按预期工作。

如果onchange事件中没有操作（没有延迟） - 按预期工作。

如果onchange会改变div的颜色（不显示） - 有时（3/10）按预期工作，大声笑。

js-guru，请解释，到底是怎么回事？

Answer 1

请注意，当对话框打开时，JS引擎未运行提交时出现问题：Javascript onchange event preventing onsubmit event in HTML form?

事实证明它只存在一个警告（） - 或一个确认（） - 在输入的onchange事件期间导致表单的onsubmit 不发火的事件。 JS线程似乎被阻止了警报（）。解决方法是不包括任何alert（）或confirm（）输入的onchange调用。

他们很可能通过在onchange调用中禁止alert（）或confirm（）命令来解决该错误，以允许表单按预期提交。

Answer 2

onsubmit的作用类似onclick，需要连续onmousedown和onmouseup个事件。如果您的代码显示对话框（例如警报）或在onmouseown事件后替换按钮，则不会触发后续onmouseup，从而取消该事件。用somediv交换文本框和按钮应该会有所帮助。

由onchange默默杀死的Onsubmit事件

2 个答案: