javascript - 文件输入触发更改事件两次(或更多)

Question

我有一个隐藏的基本 input[file] 元素。当您单击 #holder 时，会弹出一个文件浏览器。但是选择一个文件会触发 console.log() 行执行两次(在我的计算机上)。

注意:以下代码会使我的 Chrome 标签页崩溃。

您最好将其作为单独的文件运行。无法提供“工作”演示，但这是我能得到的最接近 MCVE 的演示.

var element = document.getElementById('holder');

element.onclick = function(e) {
  var input = document.getElementById('file-input');
  input.click();
  input.addEventListener("change", function(evt) {
    console.log(evt);
    Phimij.addFiles(input.files);
  }, false);
};

#holder {
  border: 10px dashed #ccc;
  width: 300px;
  height: 300px;
  margin: 20px auto;
}
#holder.hover {
  border: 10px dashed #333;
}
#file-input {
  display: none;
}

<div id="holder">
  <input type="file" multiple id="file-input" />
</div>

Answer 1

单击 事件冒泡 祖先树。这意味着点击您的 input 将冒泡到您的 #holder 元素并触发您的 click 处理程序。在 #holder 上的 click 处理程序中，您触发了 input 上的 click 事件。这就是您的浏览器崩溃的原因:您触发了无限循环。

解决方法是在input上钩住click，告诉它不要冒泡(传播)；查看标记行(但请继续阅读，下面有更多注释):

var element = document.getElementById('holder');
// **** Added vvvv
document.getElementById('file-input').addEventListener("click", function(evt) {
  evt.stopPropagation();
}, false);
// *** Added ^^^^
element.onclick = function(e) {
  var input = document.getElementById('file-input');
  input.click();
  input.addEventListener("change", function(evt) {
    console.log(evt);
    // Phimij.addFiles(input.files);
  }, false);
};

#holder {
  border: 10px dashed #ccc;
  width: 300px;
  height: 300px;
  margin: 20px auto;
}
#holder.hover {
  border: 10px dashed #333;
}
#file-input {
  display: none;
}

<div id="holder">
  <input type="file" multiple id="file-input" />
</div>

---

还有一些我要更改的其他内容。您正在添加一个更改处理程序到输入每次 #holder<上有一个click/;你真的只想做一次。我还会在触发点击之前添加该处理程序。

因此，为了它的值(value)，我会做出一些改变:

var element = document.getElementById('holder');
var input = document.getElementById('file-input');

element.addEventListener("click", function() {
  input.click();
}, false);

input.addEventListener("click", function(evt) {
  evt.stopPropagation();
}, false);
input.addEventListener("change", function(evt) {
  console.log(evt);
  // Phimij.addFiles(input.files);
}, false);

#holder {
  border: 10px dashed #ccc;
  width: 300px;
  height: 300px;
  margin: 20px auto;
}
#holder.hover {
  border: 10px dashed #333;
}
#file-input {
  display: none;
}

<div id="holder">
  <input type="file" multiple id="file-input" />
</div>