2

我发现 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 链接。

4

1 回答 1

1

通过@carter 的一些见解和第二个测试用例，我想我明白现在发生了什么。

该onchange事件首先针对正常的 put-in-new-text-and-hit-enter 情况触发。这发生在 Firefox 和 Chrome 中，这是我所期望的。

其次，在 Chrome 中，如果是“脏的”（即有变化）并且随后被销毁，该onchange事件也会触发。input这在 Firefox 中不会发生。请注意，input变脏很重要——如果自上次以来没有发生任何更改onchange，则通常不会发送另一个事件。

但是，Chrome 对此行为有一个例外：如果在处理事件期间input被销毁，它显然仍然认为是脏的，因此会触发第二个事件。onchangeinput onchange

您可以通过将上面的 Javascript 更改为以下内容来看到这一点：

function func() {
    console.log( 'resetting' );
}

setTimeout( function() {
    document.getElementById( 'me' ).parentNode.innerHTML = 'test';
}, 3000 );

您会看到，如果您在替换发生之前输入输入，您将在 Chrome 中获得日志消息，但在 Firefox 中不会。

于 2013-10-25T14:25:54.253 回答