onsubmit事件默默的onchange杀害 [英] Onsubmit event silently killed by onchange

问题描述

onsubmit事件可以静静地杀死onchange事件，如果同时调用。我承担JS引擎竞争状态。经测试，在铬，FF3，FF6和IE9。

Onsubmit event can silently kill onchange event, if called simultaneously. I assume race condition in js engine. Tested in chrome, FF3, FF6 and IE9.

要重现你需要改变输入的内容，并点击提交按钮。不要让输入变化之间的任何额外的点击和提交按钮的点击。

To reproduce you need to change contents of input and click on submit button. Do not make any additional clicks between input change and submit button click.

<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

Expected behavior: onchange event, than onsubmit.

如果我们使用按钮而不是提交并称之为事件此起彼伏 - 一切正常。

If we use button instead of submit and call events one after another - everything works as expected.

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

If there is no operations (no delay) in onchange event - works as expected.

如果将平变化改变div的颜色（不显示） - 有时（3/10）按预期工作，哈哈

If onchange will change div's color (not display) - sometimes (3/10) works as expected, lol.

JS-大师，请解释一下，这到底是怎么回事？

js-guru, please, explain, what the hell is going on?

推荐答案

的onsubmit 就像的onclick ，这就要求 onmousedown事件和 onmouseup 事件连续。如果你的code显示一个对话框（例如警报）或 onmouseown 事件之后取代了按钮，随之而来的 onmouseup 是不是解雇，因而取消了此次活动。交换文本框和按钮，somediv应该有所帮助。

onsubmit works like onclick, which requires onmousedown and onmouseup events consecutively. If your code shows a dialog (eg. alert) or replaces the button after onmouseown event, consequent onmouseup is not fired and thus cancels the event. Swapping the textbox and button with somediv should help.

这篇关于onsubmit事件默默的onchange杀害的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！