javascript - click() 在 chrome 中不起作用答案

【问题标题】：javascript - click() doesn`t work in chromejavascript - click() 在 chrome 中不起作用
【发布时间】：2012-04-09 04:18:29
【问题描述】：

我已经尝试过了，（注意我使用的是 jQuery）：

function HandleFileButtonClick()
{
    1. //$('#filesel').click();
    2. //document.replyform.image.click();
}

HTML：

<input type="file" id="filesel" name="image" style="display: none;"  /> 
<a href="#"><img src="<?=TF?>/img/att.png" style="height:20px;" onclick="HandleFileButtonClick();" /></a>

Google Chrome 浏览器都没有工作...任何想法，或替代 jQuery click()

【问题讨论】：

另见Chrome and Firefox file upload browse bug。

标签： javascript jquery html click

【解决方案1】：

我是来帮助其他人解决类似问题的。我尝试使用 .trigger('click') 在 FILE 字段中启动 click 事件，如果 style='display:none' 则发现 Chrome 与 Mozila Firefox 和 IE 不同，它不允许它使用这种样式。解决方案是不要使用 display:none 并使用 style='width:0px;height:0px' 代替它。结果是一样的，FILE 字段被隐藏了，你可以使用另一个按钮来开始它的工作，即使在 Chrome 中也是如此。

最好的问候偷看。

【讨论】：

很好的解决方案，应该得到更多的关注！
另外，我刚刚发现通过使用可见性：隐藏； Chrome 可以让它工作（和 Firefox、Opera 和 Safari，但没有尝试使用 Explorer）。

【解决方案2】：

听起来您遇到了一道安全墙，该安全墙设计为只允许用户触发文件上传框。

您可以尝试将浏览器的browse 按钮绝对定位在您的链接上，然后将其opacity 设置为0。

【讨论】：

不/。不是安全墙，单击事件在未隐藏时有效。这是（我相信）一个优化功能，即删除 display:none 事件上的所有侦听器，因为不应该从那里点击它们。

【解决方案3】：

对于真正的文件输入，不要使用 removeClass 或 addClass，或 width:1px。只需使用简单的 CSS：visiblity: hidden; position: absolute;

这将解决您在这种情况下的所有问题！

【讨论】：

【解决方案4】：

你想完成什么？

也许这就是你想要的：

function HandleFileButtonClick()
{
    ...
}

$('#filesel').click(HandleFileButtonClick);

~~注意：~~

~~如果你试图通过调用JQuery 的click 函数来触发鼠标点击事件，那你就完全跑题了。这是无法实现的。~~

【讨论】：

那么为什么它可以在除 chrome 之外的任何其他浏览器中工作？...我不是 javascript/jquery 专家，但我认为您偏离了轨道...顺便说一句，函数是通过 onclick 调用的="" 不需要 $('#filesel').click(HandleFileButtonClick);
@Andrei，真的，它真的会触发点击事件吗？，如果是我想学习它。你能指出我可以了解的一些链接/文档吗？
您可以在这里看到：api.jquery.com/click 描述：将事件处理程序绑定到“click”JavaScript 事件，或在元素上触发该事件。

【解决方案5】：

我没有使用 CSS 修复来隐藏文件字段，而不使用 display:none，而是使用以下策略：

CSS：

.hidden {display:none}

HTML

<input type="file" name="file-upload" id="file-upload" class="hidden" /><button>Upload</button>

在原型中：

$('file-upload').removeClassName('hidden').click();$('file-upload').addClassName('hidden');

在 jQuery 中：

$('#file-upload').removeClass('hidden').click().addClass('hidden');

在我看来，这胜过与不同浏览器风格的搏斗。为我工作！

【讨论】：