文件输入触发器改变事件两次（或更多）

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

click事件泡沫了祖先树。这意味着点击你的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>

---

还有一些其他的东西我会改变。你加 a change处理程序的输入每次有click#holder;你真的只想做那一次。我还会在触发点击之前添加该处理程序。

因此，对于它的价值，一些变化我会做：

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>