由onchange默默殺死的Onsubmit事件

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事件阻止了HTML表單中的onsubmit事件？

事實證明，在輸入的onchange事件期間只存在alert（）或confirm（） - 導致表單的onsubmit事件不會觸發。 JS線程似乎被alert（）阻止了。 解決方法是在輸入的onchange調用中不包含任何alert（）或confirm（）。

他們很可能通過在onchange調用中禁止alert（）或confirm（）命令來解決該錯誤，以允許表單按預期提交。

Answer 2

onsubmit就像onclick一樣，它需要連續的onmousedown和onmouseup事件。 如果您的代碼顯示一個對話框（例如警報）或在onmouseown事件后替換該按鈕，則不會觸發隨后的onmouseup ，從而取消該事件。 用somediv交換文本框和按鈕應該會有所幫助。