为什么在文件输入上触发点击事件也会在表单上触发提交事件？答案

【问题标题】：Why triggering a click event on a file input will trigger also submit event on form?为什么在文件输入上触发点击事件也会在表单上触发提交事件？
【发布时间】：2013-12-12 07:19:17
【问题描述】：

我正在对 HTML 表单中的文件输入进行皮肤处理。我通过隐藏输入来实现结果，然后我设计了自己的按钮并单击该按钮，触发隐藏输入的单击事件，以打开本机浏览窗口。这可行，但是当我关闭浏览窗口时，会在表单上触发 Javascript 提交处理程序（但没有真正发生提交，只会触发事件）。

我准备了一个小提琴：http://jsfiddle.net/Ebcu5/

HTML：

<form id="form">
    <input id="file" type="file" name="photo" />
    <button id="upload">Browse</button>
</form>

JS：

$("#form").submit(function(){
    alert('submit event triggered');
});

document.getElementById('upload').addEventListener('click',function(){
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true);
    uploading = true;
    document.getElementById('file').dispatchEvent(evt);
});

CSS：

input#file { position: fixed; top: -100px; }
button { border: solid 3px black; border-radius: 3px; font-size: 18px; line-height: 20px; text-transform: uppercase; font-family: Arial; line-height: 31px; background: #fd6706; border-radius: 13px; }

【问题讨论】：

您很可能误诊问题。我看不到 id="upload" 元素，我敢打赌它是按钮。单击按钮会触发提交事件，除非该按钮专门设置为 type="button"。 jsfiddle.net/Ebcu5/1
你为什么要像这样一起使用常规的 JS 和 jQuery？仅使用 jQuery 会更简洁...
对不起，这是一个复制和粘贴错误......我的按钮有 id="upload" 就像小提琴一样。已上传文件。
只是因为代码诞生于不同的时代:)

标签： javascript jquery html forms file-upload

【解决方案1】：

解决了。只需在上传点击事件处理程序中使用 evt.preventDefault()。

更新小提琴：http://jsfiddle.net/Ebcu5/2/

document.getElementById('upload').addEventListener('click',function(evt){
                evt.preventDefault();
    document.getElementById('file').click();
});

【讨论】：

或者只是把按钮变成一个按钮。 type="按钮"
@KevinB type="button" 为我修复了它。这说得通。谢谢

【解决方案2】：

更改：<button id="upload">Browse</button>

收件人：<button id="upload" type="button">Browse</button>

这要归功于 Kevin B 对另一个答案的评论：

或者只是让按钮成为按钮。 type="button" – Kevin B 2013 年 11 月 26 日 22:35

只是希望它是一个实际的答案，这样人们就可以在不通过 cmets 挖掘的情况下看到它。

【讨论】：