virtual <input type =“file”/> element - unreliable onchange event - why?

时间:2017-07-14 01:54:15

标签: javascript html

我的系统是Windows 10,Chrome稳定59.移动Chrome(Android)也会出现问题。

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

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

在文件选择完成之前,是否可以将虚拟“input”元素进行垃圾收集(我不会将其添加到DOM,因为我不想在以后手动清理)?我认为这不太可能,但我不知道浏览器的内部。

1 个答案:

答案 0 :(得分:1)

好的,我自己也想过这个。我的假设是正确的 - &#34;输入&#34;在调用onchange事件之前,元素已从内存中删除 - 也就是说,如果我从未在创建它的函数之外存储任何引用,并调用onclick。

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