文件输入javascript点击生成的不是真正的鼠标点击铬

我在chrome打开文件输入类型的文件上传弹出窗口时遇到了麻烦。

正如你在这里看到的： http ： //jsfiddle.net/cavax/K99gg/3/ ，单击一个元素可以触发对文件输入的单击，但是例如，hover一个元素不会触发对输入的单击。

$('#test').on('click', function(){ $('#upload').trigger('click'); }); $('#test').on('mouseenter', function(){ $('#upload').trigger('click'); }); 

在现实生活中我遇到了这个麻烦，因为在一个网络应用程序中，我正在加载一个内容输入文件中的ajax内容。 在加载结束时，弹出文件必须打开，但无法在Chrome上运行（在FF上工作）。

我猜的问题是鼠标单击（hover，超时等）不会产生动作，因此chrome不会触发fileupload。

我也试过这个： http ： //jsfiddle.net/cavax/K99gg/7/ ，所以点击元素，等待然后触发点击但没有，因为点击中间有“settimeout”触发 ：（

 $('#test').on('click', function(){ setTimeout(function(){ $('#upload').trigger('click'); }, 3000); }); 

如果你删除延迟： http ： //jsfiddle.net/cavax/K99gg/8/它是否有效任何想法让这项工作？

Answer 1

如果我没记错的话，mouseenter和mouseleave是特定于IE的，而不是标准事件。 也许他们被延长了，但不认为他们成为一个标准。 所以事件本身可能会产生一些问题。

要解决此问题，您可以使用lib（例如jQuery）来处理浏览器差异（或者您可以检查那里的代码并获取您需要的代码）。

第二种方式……尝试鼠标hover……它工作得更好（再次……与他们一起工作了一段时间，所以事情可能已经发生，但这就是我记得他们的方式）。

Answer 2

由于安全原因，无法触发input file type单击事件。

您可以尝试通过将button/div位置设置为absolute并将top为-100px来-100px这意味着通过设置上面的样式将其定位在视口外部使其工作。

但是对于mouseenter和mouseover我认为它不会起作用！

编辑：

在视口和目标点击事件之外移动输入

点击示例

旁注：现在click发生2次，如您所写

 $('#upload').trigger('click').click(); 

您只需要

 $('#upload').trigger('click'); // $('#upload').click() 

除非你想让它发射超过一次。