Javascript Chrome上偶尔会丢失输入[type=file]更改事件

我试图通过一个普通的

来模拟

输入[type=file]

，在大多数情况下，它工作得很好，但有时

更改

事件不会被触发

var count = 0;
button.addEventListener('click', function (e) {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.onchange = function (e) {
    const file = e.target.files && e.target.files[0];
    if (file) {
        $('span').text(`file size: ${file.size}, action count: ${++ count}`);
    }
  };
  document.body.appendChild(input);
  input.click();
  document.body.removeChild(input);
}, false)

以下是重现问题的步骤：

单击按钮，然后选择一个文件

查看操作计数是否增加

重复上述步骤

通常，在选择一个文件后，操作计数每次增加1，即使是与以前相同的文件（因此这不是值未更改的问题）

但是，有时在选择文件后，什么也不会发生。事实上，这种情况经常发生，但并不正常。例如，我只是重复了上面的步骤7次，得到了一个事件丢失。有时我不得不重复几十次才输。对于经常选择文件的用户来说，这是一个明显的问题

---

这似乎只发生在Chrome上，在Chrome48-51上复制，我想知道是否有人碰巧遇到同样的问题并得到解决方案？谢谢。

重用输入元素有助于：

const input = document.createElement('input');
input.type = 'file';

button.addEventListener('click', function() {
  input.onchange = function() {
    // deal with input.files here
  };

  input.value = '';
  input.click();
}, false);

在您的例子中，甚至没有必要每次都替换

input.onchange

，因为它不依赖于button的

onClick

处理程序的关闭（因此您只需重置值并触发一个click事件），但我决定以这种方式编写它，以防有人需要关闭（就像我那样）

在一个

setTimeout

中放置

input.click（）

似乎也有帮助，但后来它在一个较重的页面上坏了

---

至于发生这种事的原因，我不知道。娜达，我已经挖掘和调试了好几个小时了。在您的输入元素发布一个月后，还有一个未回复的问题。

重用输入元素有助于：

const input = document.createElement('input');
input.type = 'file';

button.addEventListener('click', function() {
  input.onchange = function() {
    // deal with input.files here
  };

  input.value = '';
  input.click();
}, false);

在您的例子中，甚至没有必要每次都替换

input.onchange

，因为它不依赖于button的

onClick

处理程序的关闭（因此您只需重置值并触发一个click事件），但我决定以这种方式编写它，以防有人需要关闭（就像我那样）

在一个

setTimeout

中放置

input.click（）

似乎也有帮助，但后来它在一个较重的页面上坏了

至于发生这种事的原因，我不知道。娜达，我已经挖掘和调试了好几个小时了。在您发布一个月后，有一个帖子仍然没有回复。

“有时变更事件不会被触发”无法在chromium 51上重现“有时变更事件不会被触发”无法在chromium 51上重现