javascript - Onsubmit 事件被 onchange 悄无声息地杀死

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

onsubmit 的作用类似于onclick，它需要连续发生onmousedown 和onmouseup 事件。如果您的代码在 onmouseown 事件之后显示对话框(例如警报)或替换按钮，则不会触发随后的 onmouseup 并因此取消该事件。用 somediv 交换文本框和按钮应该会有所帮助。