javascript – 由onchange默默杀死的Onsubmit事件

如果同时调用,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,请解释,到底是怎么回事？

解决方法:

onsubmit就像onclick一样,它需要连续的onmousedown和onmouseup事件.如果您的代码显示一个对话框(例如警报)或在onmouseown事件后替换该按钮,则不会触发随后的onmouseup,从而取消该事件.用somediv交换文本框和按钮应该会有所帮助.

标签：javascript,events,browser,dom-events
来源： https://codeday.me/bug/20190826/1732708.html