Javascript 第一次单击时不会在Microsoft Edge上触发更改事件

我正在尝试实现拖放和浏览文件。我有一个id为

#的
框，试图在该
的点击事件中触发
。以下代码在Mozilla Firefox和Google Chrome上运行良好，但在Microsoft Edge上出现问题


$（document）.off（）.on（'click'，'#box'，函数（）{
$（'#imageUpload'）。触发器（'click'）；
$（'#imageUpload'）.off（）.on（'change'，function（）{
var imageLoader=document.getElementById（'imageUpload'）；
selectedFiles=imageLoader.files；
imageBrowseUploader（所选文件）；
});
});
#框{
边框：1px点#0B85A1；
宽度：100%；
高度：150像素；
颜色：#92AAB0；
文本对齐：居中；
字号：500；
}
#图像上传{
可见性：隐藏；
}

拖放或单击此处上载您的图像。
我会将更改放在单击功能之外，如下所示：


$（文档）.ready（函数（）{
$（document）.off（）.on（'click'，'#box'，函数（）{
$（'#imageUpload'）。触发器（'click'）；
});
$（'#imageUpload'）.off（）.on（'change'，function（）{
var imageLoader=document.getElementById（'imageUpload'）；
selectedFiles=imageLoader.files；
imageBrowseUploader（所选文件）；
});
});
#框{
边框：1px点#0B85A1；
宽度：100%；
高度：150像素；
颜色：#92AAB0；
文本对齐：居中；
字号：500；
}
#图像上传{
可见性：隐藏；
}

拖放或单击此处上载您的图像。

$（document）.off（）.on（'click'，'#box'，函数（）{
$（'#imageUpload'）。触发器（'click'）；
$（'#imageUpload'）.off（）.on（'change'，function（）{
var imageLoader=document.getElementById（'imageUpload'）；
selectedFiles=imageLoader.files；
imageBrowseUploader（所选文件）；
});
});
#框{
边框：1px点#0B85A1；
宽度：100%；
高度：150像素；
颜色：#92AAB0；
文本对齐：居中；
字号：500；
}
#图像上传{
可见性：隐藏；
}

拖放或单击此处上载您的图像。
这是一个正在运行的演示，有一些小改动！（如你所见）


$（文档）.ready（函数（）{
$（文档）。在（'单击'，'框'）上，函数（）{
//调试器；
$（'#imageUpload'）。触发器（'click'）；
});
$（文档）.on（'change'，函数（）{
调试器；
var imageLoader=document.getElementById（'imageUpload'）；
selectedFiles=imageLoader.files[0]。名称；
imageBrowseUploader（所选文件）；
});
});
函数imageBrowseUploader（选定文件）
{
警报（选定的文件）；
}
#框{
边框：1px点#0B85A1；
宽度：100%；
高度：150像素；
颜色：#92AAB0；
文本对齐：居中；
字号：500；
}
#图像上传{
可见性：隐藏；
}

拖放或单击此处上载您的图像。
绑定事件后触发（'click'）
。为什么要将事件处理程序绑定到另一个事件处理程序中？请共享#imageUpload函数clickBecause I need triggered when拖放或单击此处上载图像。单击。@SilverSurfer#imageUpload是输入类型的id吗？尝试至少分享一个html示例来帮助您