我有一个隐藏的基本 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>
最佳答案
单击
事件冒泡 祖先树。这意味着点击您的 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>
关于javascript - 文件输入触发更改事件两次(或更多),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38845454/