文件輸入觸發器改變事件兩次（或更多）

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>