Question

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

正如您在此处所见：http://jsfiddle.net/cavax/K99gg/3/，单击元素可触发文件输入的单击，但例如，悬停元素不会触发输入的单击。

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

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

我猜的问题是鼠标单击（悬停，超时等）不会产生动作，因此chrome不会触发文件上传。

我也试过这个：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）来处理浏览器差异（或者您可以检查代码并获取所需内容）。

第二种方式......尝试鼠标悬停......它效果更好（再次......暂时不能与它们一起使用，所以事情可能已经发生了，但这就是我记得它们的方式）。

Answer 2

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

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

但对于mouseenter和mouseover，我觉得它不会起作用！

修改

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

Example on click

旁注：现在click出现了2次，因为你写了

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

你只需要

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

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

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

2 个答案: