我发现 Chrome 和 Firefox 之间的行为存在奇怪的差异,想知道是否有人知道发生了什么。
首先,代码(参见 http://jsfiddle.net/pXgaE/1/ 的实例):
HTML:
<input id='me' onchange='func()' />
Javascript:
function func() {
console.log( "resetting" );
document.getElementById( 'me' ).parentNode.innerHTML = "test";
}
在 Firefox 中,如果我在字段中输入内容并按“回车”,日志消息就会出现一次。另一方面,在 Chrome 中,日志消息会出现两次。
Chrome 的事件处理有何不同(错误?)?
旁白:不,我也不太喜欢这段代码,我宁愿更明智地重写它。但我真的很好奇到底发生了什么来解释这一点。
编辑:出于某种原因,关闭输入标签每次都会让我烦恼。它们现在应该正确关闭。另外,仅供引用,我在 Mac 上的 Chrome 30.0.1599.101 以及 Chrome Canary 32.0.1680.0 上也遇到了此行为。
编辑2:我最初将innerHTML设置为另一个输入标签,但我可以通过设置为纯文本来重现这一点。更新 Javascript 和 JSFiddle 链接。
最佳答案
根据 @carter 和 second test case 的一些见解,我想我现在明白是怎么回事了。
对于正常的 put-in-new-text-and-hit-enter 情况,首先会触发 onchange
事件。这种情况在 Firefox 和 Chrome 中都会发生,这是我所期望的。
其次,在 Chrome 中,如果 input
为“脏”(即发生更改)并随后被销毁,onchange
事件也会触发。这在 Firefox 中不会发生。请注意,input
是否脏很重要 - 如果自上次 onchange
后没有发生任何更改,通常不会发送另一个事件。
Chrome 对此行为有一个异常(exception):如果 input
在处理 onchange
事件期间被销毁,它显然仍然存在认为input
是脏的,因此触发第二个onchange
事件。
您可以通过将上面的 Javascript 更改为以下内容来看到这一点:
function func() {
console.log( 'resetting' );
}
setTimeout( function() {
document.getElementById( 'me' ).parentNode.innerHTML = 'test';
}, 3000 );
您会发现,如果您在替换发生之前输入内容,您将在 Chrome 中收到日志消息,但在 Firefox 中则不会。
关于javascript - 替换输入元素仅在 Chrome 中引发 onchange 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19577815/