虚拟 <input type=“file”> 元素-不可靠的onchange事件-为什么？

Question

我的系统是Windows 10，Chrome稳定版59。在移动Chrome（Android）中也观察到该问题。

我在html / js中有一个项目-https: //github.com/f3flight/html-storyboard在这里托管-http: //us.3ft.ru/draw/

我当前的问题是有时（在移动设备-Android手机和平板电脑上，还有更多此类问题）“ LOAD A”和“ LOAD”按钮会创建输入元素，然后以编程方式在其上“单击” https://github.com/f3flight /html-storyboard/blob/master/js.js#L285 ， https://github.com/f3flight/html-storyboard/blob/master/js.js#L346 ，有时一个文件后，已经在浏览器和选择选择窗口/应用程序关闭（在我同时使用“文档”应用程序和“相机”应用程序测试的Android上），“ onchange”事件不会触发。 页面上现在有一个DBG按钮，该按钮在底部打开一个控制台，该控制台可以作为单个“ load_all”或“ load”行来监视问题，而没有更多的调试输出（应该有很多）。 我觉得这个问题发生在Android上，而不是台式机上，但我也确实在台式机上看到了。

在文件选择完成之前，可能是虚拟的“输入”元素被垃圾回收了（我不想将其添加到DOM，因为我不想稍后手动清理）？ 我认为这不太可能，但我不知道浏览器的内部。

Answer 1

好的，我自己已经找到了。 我的假设是正确的-“ input”元素在调用onchange事件之前已从内存中删除-也就是说，如果我从未在创建它并调用onclick的函数之外存储对它的任何引用。

我通过创建模块作用域变量来解决此问题： https : //github.com/f3flight/html-storyboard/blob/master/board.js#L14我在创建输入元素时分配给它，而不是分配新变量。 这足以解决问题。