入力[タイプ=ファイル]変更イベントがChromeで時折失われる

Question

を通常の<button>でシミュレートしようとしていますが、ほとんどの場合うまく動作しますが、changeイベントが発生しないこともあります。ここで

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) 

jsfiddle

問題を再現する手順は、次のとおりです

1. ボタンをクリックし、ファイルを選択します。
2. 行動回数増加かどうかを確認します。

通常上記

繰り返しステップ、アクション・カウント（前と同じファイルがので、これは問題の値-変化しないようなものでなくてもその都度ファイルを選択した後1によって増加、 ）。

しかし、時々、ファイルを選択した後、何も起こりません。実際、これはかなり頻繁に起こりますが、不規則です。たとえば、上記の手順を7回繰り返して、イベントが失われました。時々、それを数十回繰り返す必要があります。ファイルを頻繁に選択するユーザーにとっては、明らかな問題になります。

これはChromeのみに起こるようです、誰もが同じ問題を満たすために起こると、それのためのソリューションを取得する場合、私は思ったんだけど、クローム48-51上で再現？ありがとう。入力要素を再利用

が

Answer 1

ができます：あなたのケースでは

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交換する必要もないが、それはボタンのonClickハンドラの閉鎖に依存しないので、（そう、あなただけのリセット値を設定してクリックイベントを発生させます）、誰かが閉鎖を必要とする場合（私のように）、この方法で記述することにしました。

input.click()をsetTimeoutに入れることも助けになりましたが、重いページで破られました。

なぜのように、これは起こっている - 私は考えています。掘り出して数時間デバッグしました。あなたの1ヶ月後に投稿されたvery similar questionがありますが、未回答です。